用Javascript制作站内搜索器

javascript

    用JavaScript做的站内搜索不仅编程实现、维护起来很简单,而且它能在客户端浏览器直接执行,无须服务器的支持,也可以省去申请有脚本执行权限空间的麻烦。所以,只要你愿意动手,有个人主页就能有自己的站内搜索。下面让我们共同来做一个基于JavaScript的站内搜索的脚本,可不要小看它,做完了你就知道它的好处了。 
 
   首先,你要编写一个搜索表单,将用户要搜索的数据提交给JavaScript函数。最简单的代码如下,因为是最简单的HTML代码,所以就不作解释了: 
<form name="search" > 
<input type="text" size="22" name="searchStr" value="多个关键字请以空格隔开" > 
<select name="select" size="1"> 
<option selected>或者(or)</option> 
<option>并且(and)</option> 
<option selected>不包含(no)</option> 
</select> 
<input type="submit" name="submit" value="搜索"> 
</form> 
其次,要对你的站点的数据初始化。这是搜索时要用到的数据库,站点更新只要更改这些数据就行了。对于这个数据库,建议单独存为一个文件,在这里我们先存为相同路径下的"db.js" 
/* 站点数据库db.js开始 */ 
function initArray(){ /* 定义数组初始化函数 */ 
this.length=initArray.arguments.length; 
for(var i=0;i<this.length;i++) this[i]=initArray.arguments[i]; 

/* 定义待搜索的页面的标题,没有先后顺序,应将待搜索的页面都列出 */ 
var titles=new initArray('页面标题1','页面标题2',……); 
/* 这些页面的详细说明,位置应该与它们的标题一致 */ 
var descriptions=new initArray('详细说明1','详细说明2',……); 
/* 待搜索页面的地址,建议使用在你站点上的相对地址,位置也应与标题、说明相一致 */ 
var URLs=new initArray('url1','url2',……); 
/* 站点数据库db.js结束 */ 
第三步,初始化用户输入的搜索字符串,并将它传递给搜索函数,列出结果。 
function goSearch(){ 
var searchStr=document.search.searchStr.value; /* 取得表单中的用户输入的搜索字符 */ 
var string1=searchStr.toLowerCase(); /* 转换为小写,避免大小写敏感 */ 
var length1=string1.length; 
var string2=''; 
for(var i=0;i<3;i++){ /* 取得搜索的字符串的各个关键字的逻辑关系 */ 
if(document.search.select.options[i].selected) logic=i;} 
if(length1!=0&&string1!=' '&&string1!=' '){ /* 滤掉"空"关键字 */ 
for(i=0;i<length1;i++){ /* 将表单中的用户输入的搜索字符串的空格转换为"+"号 */if(string1.charAt(i)==' ') string2+='+'; 
else string2+=string1.charAt(i);} 
var search=string2.split('+'); /* 将转换过的搜索字符串以"+"为分割符分割为一个字符串数组 */ 
uptodataSearch(search); 
outWin=window.open('','',''); doc=outWin.document; 
if(hitCount!=0){ /* 如果检索到符合要求的页面 */ 
doc.write('<p>检索结果:共有'+hitCount+'个页面符合字符串:"<b><font color="ff0000">'+string2+'</font></b>":</p><ul>'); 
for(i=0;i<hitCount;i++){ 
doc.write('<li>'); 
hrefmaker(titles[index[i]],URLs[index[i]],descriptions[index[i]]); /* 把检索到的数据一一列出,这里调用到的链接生成函数hrefmaker()在下面给出 */ 
doc.write('</li>');} 
doc.write('</ul>'); 

else doc.write('<p>很抱歉,本站没有关于"<b><font color="ff0000">'+string2+'</font></b>"的内容!</p>'); 

else alert('请输入要搜索的关键字!'); 

第四,编写搜索函数。限于篇幅,给出的函数只有“不包含”的功能(就是输入的多个关键字必须全部满足要求才算符合搜索结果),要实现"或者"、"并且"功能请访问以下链接:http://ctsight.topcool.net/documents/pt_nr2000050902.html。 
var hitCount=0; /* 全局变量hitCount,用于记录符合搜索要求的页数 */ 
var index=new Array(); /* 全局变量数组,用于保存符合搜索要求的的页面在"数据库"db.js中的位置 */ 
function uptodataSearch(searchStr){ /* 以经过处理的用户输入的搜索字符串为参数的搜索函数 */ 
var tmpCount1=0,tmpCount2=0; 
var tmpStr='',des=''; 
var length1=searchStr.length,length2=titles.length; 
for(var i=0;i<length2;i++){ /* 检索整个站点资料 */ 
tmpStr=titles[i]+descriptions[i]; /* 将本次循环的站点数据的标题与详细内容合并,作为本次检索的范围*/ 
des=tmpStr.toLowerCase(); /* 同样将它转化为小写 */ 
tmpCount1=tmpCount2; 
if(logic==2){ /* 如果逻辑关系是"不包括(not,!)" */ 
if(des.indexOf(searchStr[0])!=-1){ //首先必须满足第一个关键字要求 
for(j=1;j<length1;j++){ //检索其它关键字 
if(des.indexOf(searchStr[j])==-1) tmpCount2++;} 
if(tmpCount1==tmpCount2-length1+1){ /* 只有满足第一个关键字要求但不满足其它任何一个关键字的才算符合检索要求 */ 
index[hitCount]=i; hitCount++;} } } } } 
第五,编写搜索页面。 
OK,基于JavaScript的站内搜索完工了。试一下,感觉如何? 

时间: 2024-10-24 06:00:37

用Javascript制作站内搜索器的相关文章

利用FrontPage制作站内信息搜索平台

frontpage 对于个人网站,随着网站信息量的增加,我们也需要为网站增设站内.站外搜索引擎方便浏览者的访问和信息检索,不仅如此,增加了站内.站外搜索引擎还可以有效提高网站的档次,使个人网站更具大站风范. 但很多站长都很"畏惧"添加搜索引擎,因为在他们心目中制作一个搜索引擎不仅需要专业的编程知识还要高深的数据库技术等等,其实不然,相信你在看了本文后,一定会觉得:搜索引擎其实很简单! 做信息搜索网站需要什么 1.了解服务器支持的语言,如服务器是否支持FrontPage扩展模块,是否支持

FrontPage制作站内信息搜索平台

  对于个人网站,随着网站信息量的增加,我们也需要为网站增设站内.站外搜索引擎方便浏览者的访问和信息检索,不仅如此,增加了站内.站外搜索引擎还可以有效提高网站的档次,使个人网站更具大站风范. 但很多站长都很"畏惧"添加搜索引擎,因为在他们心目中制作一个搜索引擎不仅需要专业的编程知识还要高深的数据库技术等等,其实不然,相信你在看了本文后,一定会觉得:搜索引擎其实很简单! 做信息搜索网站需要什么 1.了解服务器支持的语言,如服务器是否支持FrontPage扩展模块,是否支持ASP.PHP等

利用FrontPage2003来制作站内信息搜索平台

  做信息搜索网站需要什么 1.了解服务器支持的语言,如服务器是否支持FrontPage扩展模块,是否支持ASP.PHP等,如果仅支持HTML,只能采用专业代码制做搜索功能. 2.掌握代码编辑方法.熟悉代码后更容易使搜索引擎贴近网站风格. 利用FrontPage制作站内搜索 FrontPage不仅可以帮助我们迅速入门网页制作,还可以利用它为网站制作一个简单的站内搜索引擎,可谓是网页制作.站内搜索一气呵成. 第一步,打开FrontPage2003,执行"文件→打开网站",指定要设置站内搜

用DW MX造站内搜索

有关用DW MX制作站内搜索的问题贴子在论坛不断地有人提问,因此也就出了这一篇教程,希望对你有所帮助. 站内搜索可分为单参数(根据一个条件查询一个字段)查询和多参数(多个条件可选查询不同的数据库字段)查询,单参数查询在DW MX的简单记录集中把筛选条件选择为"包含"就行了,这时切换到"高级记录集"模式,SQL语句如下: SELECT *FROM userWHERE uesr LIKE ''%MMColParam%'' user为要查询的数据库表,uesr为要查询的字

利用FrontPage2003制作站内信息搜索平台

frontpage FrontPage不仅可以帮助我们迅速入门网页制作,还可以利用它为网站制作一个简单的站内搜索引擎,可谓是网页制作.站内搜索一气呵成.当然在制作站内信息搜索平台前你应该已经建立了一个网站. 步骤: 第一步,打开FrontPage2003,执行"文件→打开网站",指定要设置站内搜索引擎的网站目录.然后在"网站"文件夹内双击打开需要添加站内搜索引擎入口的页面(一般是网站的首页)进入编辑状态. 第二步,根据页面布局将鼠标移到添加搜索入口的位置,执行&qu

Google和百度、雅虎的站内搜索代码

对于一个网站来说,使用搜索引擎来进行站内搜索往往比自己编写的站内搜索更高效,并且不占用网站服务器的资源,下面是我搜集到的几个主要搜索引擎(Google和百度.雅虎)的站内搜索代码,使用时只需要将代码里的"www.williamlong.info"替换成你的网址即可. <!--Google站内搜索开始--><form method=get action="http://www.google.com/search"><input type=

Dreamweaver开发ASP实例视频教程(12)复杂站内搜索

dreamweaver|教程|视频教程 本视频教程由本站合作网站陶益数码工作室http://www.ty502.com推出,欢迎大家访问他们的网站. 使用Dreamweaver开发ASP具有不用手工写代码的优点,非常适合初学者建设自己的动态网站.本套教程由我们精心设计奉献给大家,内容包含了文章整站教程.音乐整站教程.图片整站教程.文件上传系统教程.投票系统教程.会员分级管理系统教程和网站后台管理教程等,通过本教程的学习,相信您一定能很快掌握动态网站制作的方法,从代码的枯燥乏味中解脱出来. 教程介

Dreamweaver开发ASP实例视频教程(11)简单站内搜索页

dreamweaver|教程|视频教程 本视频教程由本站合作网站陶益数码工作室http://www.ty502.com推出,欢迎大家访问他们的网站. 使用Dreamweaver开发ASP具有不用手工写代码的优点,非常适合初学者建设自己的动态网站.本套教程由我们精心设计奉献给大家,内容包含了文章整站教程.音乐整站教程.图片整站教程.文件上传系统教程.投票系统教程.会员分级管理系统教程和网站后台管理教程等,通过本教程的学习,相信您一定能很快掌握动态网站制作的方法,从代码的枯燥乏味中解脱出来. 教程介

轻松利用FrontPage做站内搜索

  FrontPage不仅可以帮助我们迅速入门网页制作,还可以利用它为网站制作一个简单的站内搜索引擎,可谓是网页制作.站内搜索一气呵成.当然在制作站内信息搜索平台前你应该已经建立了一个网站. 步骤: 第一步,打开FrontPage2003,执行"文件→打开网站",指定要设置站内搜索引擎的网站目录.然后在"网站"文件夹内双击打开需要添加站内搜索引擎入口的页面(一般是网站的首页)进入编辑状态. 第二步,根据页面布局将鼠标移到添加搜索入口的位置,执行"插入→We