源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

AJAX实现仿Google Suggest效果

  • 时间:2021-10-18 08:48 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:AJAX实现仿Google Suggest效果
修复了一些细节代码(支持持续按键事件) *项目名称: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还有一些差距,比如一直按着方向键问题和其他细节问题,这些都有待改进. *效果图: [img]http://bbs.blueidea.com/attachments/2007/7/8/20070708_d4dd3d2539ca277cbbbdI6N3XbqWgFDp.jpg[/img]   [b]suggest.js[/b]
var j=-1; var temp_str; var $=function(node){ return document.getElementById(node); } var $$=function(node){ return document.getElementsByTagName(node); } function ajax_keyword(){ var xmlhttp; try{   xmlhttp=new XMLHttpRequest();   } catch(e){   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");   } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4){   if (xmlhttp.status==200){    var data=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));  }   function keydeal(e){ var keyc; if(window.event){   keyc=e.keyCode;   } else if(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;    }   } } function set_style(num){ for(var i=0;i<$$("li").length;i++){   var li_node=$$("li");   li_node.className="";   } if(j>=0 && j<$$("li").length){   var i_node=$$("li")[j];   $$("li")[j].className="select";   } } function mo(nodevalue){ j=nodevalue; set_style(j); } function form_submit(){ if(j>=0 && j<$$("li").length){ $$("input")[0].value=$$("li")[j].childNodes[0].nodeValue; } document.search.submit(); } function hide_suggest(){ var nodes=document.body.childNodes for(var i=0;i<nodes.length;i++){   if(nodes!=$("keyword")){    $("suggest").innerHTML="";    }   } }
[url=http://files.jb51.net/upload/%E8%8D%89%E5%B1%A5%E8%99%AB--%E4%BB%BFgooglesuggest.rar]打包文件下载[/url]
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部