AJAX实现仿Google Suggest搜索提示效果

项目名称:AJAX实现类Google Suggest效果

作者:草履虫

联系:caolvchong@gmail.com

时间: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://cceer.xmu.edu.cn/blog/post/googlesuggest.html

文件结构: 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代码，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 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;
}
}
}