用AJAX技術做Google Suggest效果

2024-09-01 08:26:02

字體：大中小

來源：轉載

供稿：網友

原文地址: 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="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;
        }
    }
}