当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 用AJAX技术做Google Suggest效果

Javascript
颜色变换 像字符逐字输入的欢迎词
CSS 伪类实现的鼠标滑动图片链接
百度用到的Js日历 大家可以看看
CSS 渐变背景的6个演示代码
Jquery 弹出层插件实现代码
Javascript 模式实例 观察者模式
[原创]javascript 指定区域内图片等比例缩放实现代码 脚本之家整合版
javascript window对象属性整理
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
用JavaScript实现 铁甲无敌奖门人 “开口中”猜数游戏
理解 JavaScript 预解析
理解JavaScript变量作用域更轻松
JavaScript的变量作用域深入理解
javascript写的一个链表实现代码
Js 打字效果 逐一出现的文字
javascript 走马灯效果的链接提示
CSS 动态链接提示
JavaScript 事件的一些重要说明
JavaScript 三种不同位置代码的写法

No. « 266 267 268 269 »

技术文章搜索

关键字

Javascript 中的 用AJAX技术做Google Suggest效果

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

原文地址: http://cceer.xmu.edu.cn/blog/view.asp?id=55

*项目名称:AJAX实现类Google Suggest效果
*作者:草履虫
*联系:[email protected]
*时间:2007-7-7
*起因:
建发实习面试时有提到这个问题,回来就考虑去实践一下,结果花了不少时间.主要是javascript在前台的表现问题,数据库结构设计等.网上有少数的几个dom教程,没有值得借鉴的地方,而<<征服Ajax web2.0开发技术详解>>中第16章 搜索提示(suggest)中那个例子实在是简陋(当然是说javascript表现部分),而且数据库用MSSQL,后台语言用JSP,和自己熟悉的格格不入(虽然都是以后要接触的),所以自己动手了.模仿效果:Google Suggest
*开发平台:Windows2003 IIS6.0 Access数据库
*工具:DreamWeaver(写ASP),Aptana(写Javascript,HTML和CSS),Emeditor(写这篇文章),Access2003(数据库)
*测试平台:Firefox2.0,IE6.0,IE7.0
*演示地址:http://finish.3322.org/suggest/index.htm(短期有效,在本机上,可能访问不顺畅)
*:文件结构:
  index.htm:首页,展现效果
  ajax_result.asp:ajax调用后台返回结果文件
  result.asp:搜索结果文件,这个我并没有做,具体功能根据需求来写
  数据库(suggest.mdb):
    id:自动编号
    keyword:关键字
    seachtimes:被搜索次数
    matchnum:匹配的文章数目(关于这个方面想了蛮久,如何取得文章数呢,不能是搜索时动态产生,不然在偌大数据库中查询费时费力.那么必然是在后台某个时候去其他的数据库表中添加的,原来想把这方面也做了,但限于算法的不成熟和时间的限制.所以就用了随机数来替换.)
*开发过程遇到问题:
  1.CSS方面:遇到了IE双倍浮动边界Bug(float:left下的margin-left是设置的两倍,用display:inline消除)
  2.javascript方面:
    一个是那个全局变量j的上下界问题着实让我乱了一会,还好理清了思路
    按键事件的兼容性问题:IE的keyCode,其他浏览器的which事件
    onkeypress和onkeyup,onkeydown事件的区别:onkeypress只接受数字和字母,不接受系统按键(如上下
方向键)
    使用submit()方法时不能定义某个标签的id或name为submit,不然将提示缺少对象
    还有一些细节判断问题,也让我费了不少神
  3.html方面:
    如何让表单不记忆(在firefox下自动记忆会挡主ajax部分,而google中就没有这样的提示功能,所以去掉了表单记忆功能),只要在form中加一个autocomplete="off"
*补充:
  和google suggest还有一些差距,比如一直按着方向键问题和其他细节问题,这些都有待改进.
*效果图:
 

限于文章长度,只帖首页和js,其他的去附件下载:
草履虫--仿googlesuggest.rar
首页:index.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>草履虫---简易Google Suggest</title>
  <link type="text/css" rel="stylesheet" href="suggest.css"/>
  <script type="text/javascript" src="suggest.js"></script>
</head>
<body onclick="hide_suggest();">
  <img src="suggest.gif" onclick="hide_suggest();" />
  <form action="result.asp" method="post" name="search" autocomplete="off">
    <!--input type="text" name="keyword" id="keyword" onkeyup="keydeal(event);" onclick="keydeal(event);"/-->
    <input type="text" name="keyword" id="keyword" onkeyup="keyupdeal(event);" onkeydown="keydowndeal(event);" onclick="keyupdeal(event);"/>
    <input type="submit" value="手气不错"/>
    <div id="suggest"></div>
  </form>
</body>
</html>
suggest.js view plaincopy to clipboardprint?
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 keyupdeal(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;  
    }  
    }  
 
function set_style(num){  
    for(var i=0;i<$$("li").length;i++){  
        var li_node=$$("li")[i];  
        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(j j++; if(j<$$(?li?).length){ if(keyc="=40" keyc="e.keyCode;" || } if(e.which){ else if(window.event){ keyc; var keydowndeal(e){ function ; $(?suggest?).innerHTML="" if(nodes[i]!='$("keyword")){'>=$$("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;  
        }  
    }  
}