💁🏻♂️《电脑知识与技术》2000年第11期 《网页检索功能的简单实现》 福建农林大学 童建平
以下为文字版，扫描版请详见文末图片：
如今，个人主页已由当初的星火燎原发展到现在的如火如荼，内容是否丰富成了制约个人主页成败的瓶颈。而在提供大量信息的同时，若能提供站内检索服务，必能吸引访客，迅速抢占个人主页排行榜的制高点。著名网站如Yahoo!那样的搜索引擎对于个人主页是望尘莫及的，更有"杀鸡用牛刀"之嫌，因此，本文介绍一个适合个人主页的检索例子，其功能虽不能与Yahoo!同日同语，但其检索速度较Yahoo!是有过之而无不及。
请将下面代码粘贴于<head>和</head>中。其中，第一个script中的代码的功能是：当鼠标移近文本框时，反显文本框中的文字，方便输入。第二个script代码中，Keyword数组存放关键词，Keyword[0]为关键词的数量，可根据关键词的增减进行增减；Searched数组存放检索结果信息，AboutHtm数组存放检索结果相关Htm文件的链接地址；当用户输入的关键词与Keyword数组元素匹配时，显示相应Searched数组信息，直接点击Searched信息，即可浏览相应AboutHtm数组元素所指向的Htm文件。后面的SearchedHtm函数定义检索结果页面，可修改stats参数，设置是否显示工具栏、状态栏等。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<script language="JavaScript">
<!--
function input_onFocus(theForm)
{
if (theForm.emailname.value =="")
{
alert("请输入检索关键词!");
theForm.emailname.focus();
return (false);
}
return (true);
}
-->
</script>
<script language="JavaScript">
<!--
Keyword=new Object();
Searched=new Object();
AboutHtm=new Object();
Keyword[0]=5
Keyword[1]="轸念陈景润"
Searched[1]="精妙美文，不可不看"
AboutHtm[1]="http://chinahacker2000.home.chinaren.com/myarticle/jingrun.htm"
Keyword[2]="tc"
Searched[2]="编程经典"
AboutHtm[2]="http://chinahacker2000.home.chinaren.com/prog/tc/tcprog.htm"
Keyword[3]="dhtml"
Searched[3]="动态HTML技术精彩实例"
AboutHtm[3]="http://chinahacker2000.home.chinaren.com/myarticle/yesky.htm"
Keyword[4]="status"
Searched[4]="状态栏上的动态HTML技术"
AboutHtm[4]="http://chinahacker2000.home.chinaren.com/myarticle/dhtml.htm"
Keyword[5]="webcolor"
Searched[5]="网页颜色不再单调"
AboutHtm[5]="http://chinahacker2000.home.chinaren.com/myarticle/webcolor.htm"
function SearchedHtm()
{
var Found=false
var Item=document.forms[0].searchfor.value.toLowerCase();
stats='toolbar=yes,location=yes,directories=yes,status=yes,menubar=yes,'
stats+='scrollbars=yes,resizable=yes'
MsgBox=window.open("","msgWindow",stats)
MsgBox.document.write("<html><head><title>检索结果</title></head>");
MsgBox.document.write("<body bgcolor=#ffffff><center>检索结果</center>");
MsgBox.document.write("您输入的关键词是："+Item+"<hr>");
for(var i=1;i<=Keyword[0];i++)
{
if(Item==Keyword[i])
{
Found=true;
MsgBox.document.write("<br><a href="+AboutHtm[i]+">"+Searched[i]+"</a><br>")
}
}
if(!Found)
MsgBox.document.write("对不起，没有找到与该关键词相关的条目。")
MsgBox.document.write("</body></html>")
}
-->
</script>
|
再将下面代码粘贴于<body>和</body>中，即可实现检索功能。
1
2
3
4
|
<form name="search">
<input type="text" name="searchfor" size="15" value="本站搜索" onMouseOver="this.focus()" onFocus="this.select()" >
<input type="button" value="Go" onClick="SearchedHtm()" size="3" name="button">
</form>
|
本文仅为抛砖引玉，本例的检索功能有限，但若能设置好关键词，其结果还是令人满意的。比如，对于某个Searched数组元素，应有几个Keyword数组元素与之对应，增强检索容错性。更多更强的检索例子，请见于本人主页：http://chinahacker2000.home.chinaren.com。
扫描版请详见如下：
