当前位置: 首页 > 图文教程 > 网络编程 > AJAX技术 > AJAX实现仿Google Suggest效果

AJAX技术
什么是ajax的定义
ajaxrequest.js ajaxrequest 0.7最新版 使用AJAXRequest进行AJAX应用程序开发入门小技巧
javascript ajax类AJAXRequest2007-12-31 更新
ajax类AJAXRequest v0.8.01 2008-01-31 最新版附使用帮助
php ajax无刷新分页,支持id定位
js统计网页在线时间的脚本
用Ajax读取xml文件的简单例子
Ajax 的六个误区小结分析
Ajax核心XMLHTTP组件资料
ie7下利用ajax跨域盗取cookie的解决办法
ajax AjaxDownloader.js[modified]
Ajax获取页面被缓存的解决方法
php ajax无刷新上传图片实例代码
ajax实时任务提示功能的实现代码
php ajax网站浏览统计功能的简单实现
rails制作rss feed代码
一句话解决AJAX中文乱码问题[推荐]
有史以来最简单的AJAX回调库
使用ajax技术无刷新动态调用股票信息
ajax实例入门代码

AJAX技术 中的 AJAX实现仿Google Suggest效果


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-13   浏览: 134 ::
收藏到网摘: n/a

修复了一些细节代码(支持持续按键事件)
*项目名称:AJAX实现类Google Suggest效果
*作者:草履虫(也就是蓝色的ecma)
*联系:[email protected]
*时间: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="";
}
}
}

打包文件下载