javascript制作站内搜索

欢迎光临极品网，更多、更新的资源信息尽在Jpinw.Com！本站所有信息资源每日更新新的内容，请大家继续关注www.Jpinw.com!如果觉得本站还不错，对您有帮助，别忘了向您的朋友推荐本站!请记好本站网址：http://www.Jpinw.com，网站发展靠大家多多的支持！！！

极品网极品课件极品论文极品文学极品游戏极品美容极品手机资源极品股票

您现在的位置：极品网 >> 电脑学院 >> 网页设计 >> 经验技巧 >> 教程正文

javascript制作站内搜索

【字体：小大】

javascript制作站内搜索

作者：佚名教程来源：不详点击数：更新时间：2007-7-16

　用JavaScript做的站内搜索不仅编程实现、维护起来很简单，而且它能在客户端浏览器直接执行，无须服务器的支持，也可以省去申请有脚本执行权限空间的麻烦。所以，只要你愿意动手，有个人主页就能有自己的站内搜索。下面让我们共同来做一个基于JavaScript的站内搜索的脚本，可不要小看它，做完了你就知道它的好处了。
　　首先，你要编写一个搜索表单，将用户要搜索的数据提交给JavaScript函数。最简单的代码如下，因为是最简单的HTML代码，所以就不作解释了：
　　<form name=″search″ onsubmit=″goSearch(this)″>
　　<input type=″text″ size=″22″ name=″searchStr″ value=″多个关键字请以空格隔开″ onmouseover=″this.focus()″ onfocus=″this.select()″>
　　<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的站内搜索完工了。试一下，感觉如何？

教程录入：admin 责任编辑：admin

上一篇教程：如何让网页中的图像实现淡入淡出的效果

下一篇教程： Meta--容易被忽视的HTML元素

【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

最新热点		最新推荐		相关教程
				网站免“被告”的 10 大专家利用javascript创建随机巧用 javascript 四例选择最佳关键词之10个技巧 2006年Web 2.0将面临的10个问 2005年度，网页设计10大失误用javascript实现加密码用javascript自动选择留用 javascript 事件在主 javascript表单之间的数

　网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）

备案号:申请中