AJAX实现仿Google Suggest效果
AJAX实现仿Google Suggest效果
发布时间:2017-01-07 来源:查字典编辑
摘要:修复了一些细节代码(支持持续按键事件)*项目名称:AJAX实现类GoogleSuggest效果*作者:草履虫(也就是蓝色的ecma)*联系:...

修复了一些细节代码(支持持续按键事件)

*项目名称:AJAX实现类Google Suggest效果

*作者:草履虫(也就是蓝色的ecma)

*联系:caolvchong@gmail.com

*时间:2007-7-7

*工具: DreamWeaver(写ASP),Aptana(写Javascript,HTML和CSS),Emeditor(写这篇文章),Access2003(数据库)

*测试平台:Firefox2.0,IE6.0,IE7.0

*演示地址:http://finish.3322.org/suggest/index.htm(短期有效,在本机上,可能访问不顺畅)

*原文地址:http://cceer.xmu.edu.cn/blog/view.asp?id=55(转贴,使用请注明)

*:文件结构:

index.htm:首页,展现效果

ajax_result.asp:ajax调用后台返回结果文件

result.asp:搜索结果文件,这个我并没有做,具体功能根据需求来写

数据库(suggest.mdb):

id:自动编号

keyword:关键字

seachtimes:被搜索次数

matchnum:匹配的文章数目(关于这个方面想了蛮久,如何取得文章数呢,不能是搜索时动态产生,不然在偌大数据库中查询费时费力.那么必然是在后台某个时候去其他的数据库表中添加的,原来想把这方面也做了,但限于算法的不成熟和时间的限制.所以就用了随机数来替换.)

*补充:

和google suggest还有一些差距,比如一直按着方向键问题和其他细节问题,这些都有待改进.

*效果图:

限于文章长度控制只贴首页和js代码,其他代码请在下载包中查看

复制代码 代码如下:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml"lang="gb2312">

<head>

<metahttp-equiv="Content-Type"c/>

<title>草履虫---简易GoogleSuggest</title>

<linktype="text/css"rel="stylesheet"href="suggest.css"/>

<scripttype="text/javascript"src="suggest.js"></script>

</head>

<body>

<imgsrc="suggest.gif"/>

<formaction="result.asp"method="post"name="search"autocomplete="off">

<inputtype="text"name="keyword"id="keyword"/>

<inputtype="submit"value="手气不错"/>

<divid="suggest"></div>

</form>

</body>

</html>

suggest.js

复制代码 代码如下:

varj=-1;

vartemp_str;

var$=function(node){

returndocument.getElementById(node);

}

var$$=function(node){

returndocument.getElementsByTagName(node);

}

functionajax_keyword(){

varxmlhttp;

try{

xmlhttp=newXMLHttpRequest();

}

catch(e){

xmlhttp=newActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function(){

if(xmlhttp.readyState==4){

if(xmlhttp.status==200){

vardata=xmlhttp.responseText;

$("suggest").innerHTML=data;

j=-1;

}

}

}

xmlhttp.open("post","ajax_result.asp",true);

xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');

xmlhttp.send("keyword="+escape($("keyword").value));

}

functionkeydeal(e){

varkeyc;

if(window.event){

keyc=e.keyCode;

}

elseif(e.which){

keyc=e.which;

}

if(keyc!=40&&keyc!=38){

ajax_keyword();

temp_str=$("keyword").value;

}

if(keyc==40||keyc==38){

if(keyc==40){

if(j<$$("li").length){

j++;

if(j>=$$("li").length){

j=-1;

}

}

if(j>=$$("li").length){

j=-1;

}

}

if(keyc==38){

if(j>=0){

j--;

if(j<=-1){

j=$$("li").length;

}

}

else{

j=$$("li").length-1;

}

}

set_style(j);

if(j>=0&&j<$$("li").length){

$("keyword").value=$$("li")[j].childNodes[0].nodeValue;

}

else{

$("keyword").value=temp_str;

}

}

}

functionset_style(num){

for(vari=0;i<$$("li").length;i++){

varli_node=$$("li");

li_node.className="";

}

if(j>=0&&j<$$("li").length){

vari_node=$$("li")[j];

$$("li")[j].className="select";

}

}

functionmo(nodevalue){

j=nodevalue;

set_style(j);

}

functionform_submit(){

if(j>=0&&j<$$("li").length){

$$("input")[0].value=$$("li")[j].childNodes[0].nodeValue;

}

document.search.submit();

}

functionhide_suggest(){

varnodes=document.body.childNodes

for(vari=0;i<nodes.length;i++){

if(nodes!=$("keyword")){

$("suggest").innerHTML="";

}

}

}

打包文件下载

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新AJAX相关学习
热门AJAX相关学习
编程开发子分类