• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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还有一些差距,比如一直按着方向键问题和其他细节问题,这些都有待改进.
    *效果图:
      suggest.js
    复制代码 代码如下:

    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;inodes.length;i++){
      if(nodes!=$("keyword")){
       $("suggest").innerHTML="";
       }
      }
    }

    打包文件下载
    您可能感兴趣的文章:
    • JSuggest自动匹配下拉框使用方法(示例代码)
    • inputSuggest文本框输入时提示、自动完成效果(邮箱输入自动补全插件)
    • javascript suggest效果 自动完成实现代码分享
    • suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
    • ajax Suggest类似google的搜索提示效果
    • 仿google搜索提示 SuggestFramework的使用
    • Google Suggest ;-) 基于js的动态下拉菜单
    • 有关suggest快速删除后仍然出现下拉列表的bug问题
    上一篇:[js]一个获取页面ip的正则
    下一篇:AJAX乱码解决新方法
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯

    时间:9:00-21:00 (节假日不休)

    地址:江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

    AJAX实现仿Google Suggest效果 AJAX,实现,仿,Google,Suggest,