AJAX テクノロジーを使用して Google サジェスト効果を作成する

建发实习面试时有提到这个问题,回来就考虑去实践一下,结果花了不少时间.主要是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;   
試してみる{
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.that){
keyc=e.this;   
}
if(keyc!=40 && keyc!=38){
ajax_keyword();   
temp_str=$("キーワード").value;   
}
}

function set_style(num){
for(var i=0;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 j=-1;
}
}
if(keyc==38){
if(j>=0){
j- -;
if(j j=$$(" li").length;
}
}
else{
j=$$("li").length-1;
}
}
set_style(j);
if(j>=0 && j $("キーワード").value=$$("li")[j].childNodes[0].nodeValue;
}
else{
$("キーワード") value=temp_str;
}
}
}

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