用AJAX技术做Google Suggest效果

建发实习面试时有提到这个问题,回来就考虑去实践一下,结果花了不少时间.主要是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

 



 
 


 
 

   
   
   
   

 

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=$$("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;   
        }   
    }   
} 

以上就是用AJAX技术做Google Suggest效果， 更多相关文章请关注PHP中文网（www.php.cn）！