主页 > 知识库 > AJAX实现仿Google Suggest效果

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问题

标签:铜川 伊春 西藏 威海 晋城 崇左 深圳 抚州

巨人网络通讯声明:本文标题《AJAX实现仿Google Suggest效果》,本文关键词  AJAX,实现,仿,Google,Suggest,;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 下面列出与本文章《AJAX实现仿Google Suggest效果》相关的同类信息!
  • 本页收集关于AJAX实现仿Google Suggest效果的相关信息资讯供网民参考!
  • 推荐文章