AJAX实现仿Google Suggest效果

所属分类: 网络编程 / AJAX相关 阅读数: 641
收藏 0 赞 0 分享
修复了一些细节代码(支持持续按键事件)
*项目名称: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;i<nodes.length;i++){
  if(nodes!=$("keyword")){
   $("suggest").innerHTML="";
   }
  }
}

打包文件下载
更多精彩内容其他人还在看

PHP+AJAX无刷新实现返回天气预报数据

天气数据是通过采集中国气象网站的。本来中国天气网站也给出了数据的API接口,接下来为大家介绍下用php来写一个天气预报的模块,感兴趣的朋友可以参考下
收藏 0 赞 0 分享

jQuery的ajax传参巧用JSON使用示例(附Json插件)

jQuery的ajax调用很方便,传参的时候喜欢用Json的数据格式,使用示例代码如下,感兴趣的朋友可以参考下,希望对大家有所帮助
收藏 0 赞 0 分享

ajax jquery 异步表单验证示例代码

异步表单验证想必大家早已如雷贯耳,本文为大家详细讲述下ajax jquery实现异步表单验证,感兴趣的朋友可以参考下
收藏 0 赞 0 分享

AJAX如何接收JSON数据示例介绍

如何使用AJAX返回JSON数据,就是dataType,当你设置json后返回的json字符串传递到客户端就是JSON对象了,示例如下,感兴趣的朋友可以参考下
收藏 0 赞 0 分享

ajax局部刷新一个div下jsp内容的方法

局部刷新某个div下的jsp可以通过setInterval或者是setTimeout来轻松实现,具体如下,有此需求的朋友可以参考下,希望对大家有所帮助
收藏 0 赞 0 分享

ajax交互Struts2的action(客户端/服务器端)

本文为大家探讨下ajax交互Struts2的action并有客户端及服务器端代码,感兴趣的朋友可以参考下,希望对大家有所帮助
收藏 0 赞 0 分享

Ajax工作原理深入理解

ajax是异步的意思,它有别于传统web开发中采用的同步的方式。异步传输是面向字符的传输,它的单位是字符;而同步传输是面向比特的传输,它的单位是桢,它传输的时候要求接受方和发送方的时钟是保持一致的
收藏 0 赞 0 分享

Ajax方式删除表格一行数据示例代码

Ajax方式删除信息在某些情况下还是蛮实用的,下面为大家具体介绍下Ajax方式如何删除表格一行数据,感兴趣的朋友可以了解下
收藏 0 赞 0 分享

Ajax叠加(Ajax返回数据用Ajax发出)示例代码

把参数用Ajax发送到数据库进行查询然后用Ajax将数据发送到数据库签到表,于是有了下面的代码,感兴趣的朋友可以了解下,希望对大家学习ajax有所帮助
收藏 0 赞 0 分享

Ajax长连接项目案例

所谓的长连接,就是不断去发送请求,把请求阻塞在服务器端,每次超过请求时间就去重新发送请求,下面以一个实例为大家详细介绍下,感兴趣的朋友可不要错过了哈
收藏 0 赞 0 分享
查看更多