模仿Google的搜索提示框

var $=function(a_sID){return document.getElementById(a_sID);}
var $$=function(a_sName){return document.getElementsByTagName(a_sName);}
var $F=function(a_sID) {
    var oObj=$(a_sID);
    if(!oObj) oObj=document.forms[a_sID];
    return oObj;
}
function TSuggestionBox() {
    //私有属性
    this._boxes={};
    this._position=0;
    this._suggestion="";
    this._object=this;
    //私有方法
    this._setStyle=TSuggestionBox_SetStyle;
    this._getSearchResult=TSuggestionBox_GetSearchResult;
    this._listenItem=TSuggestionBox_ListenItem;
    //公共方法
    this.listen=TSuggestionBox_Listen;
    this.clear=TSuggestionBox_Clear;
}
function TSuggestionBox_Listen(a_sSearchBoxId, a_sSuggestionBoxId,a_sURL, a_sFormId) {//监听搜索框及搜索建议提示框
    var oSearchBox=$(a_sSearchBoxId);
    if(!oSearchBox) return;
    this._boxes[a_sSearchBoxId]=[a_sSuggestionBoxId,a_sURL, a_sFormId];
    var oSuggestionBox=this._object;
    oSearchBox.onkeydown=function(e){
        var oObj=$(a_sSuggestionBoxId);
        if(!oObj) return;
        var oItems=oObj.getElementsByTagName("li");
        if(!oItems) return;
   
        var iKeyCode, iPos=oSuggestionBox._position;
        if(window.event){iKeyCode=window.event.keyCode;}
        else if(e.which){iKeyCode=e.which;}
        if(iKeyCode!=40 && iKeyCode!=38) return;//不是向上或向下方向键时
//alert('向上或向上方向键？');
        if(iKeyCode==40){//向下方向键
            iPos++;
            if(iPos>=oItems.length){iPos=0;}
        }
        if(iKeyCode==38){//向上方向键
            iPos--;
        
            if(iPos<0){iPos=oItems.length-1;}
        }
        oSuggestionBox._position=iPos;
        oSuggestionBox._setStyle();
        if(iPos>=0 && iPos<oItems.length){oSearchBox.value=oItems[iPos].childNodes[0].nodeValue;}
        else{$(a_sSearchBoxId).value=oSuggestionBox._suggestion;}
    };
    oSearchBox.onkeyup=function(e){
        var iKeyCode;
        if(window.event){iKeyCode=window.event.keyCode;}
        else if(e.which){iKeyCode=e.which;}
        if(iKeyCode!=40 && iKeyCode!=38){//非向上或向下键
            oSuggestionBox._getSearchResult(a_sSearchBoxId);
            oSuggestionBox._suggestion=oSearchBox.value;
        }
    };
    oSearchBox.onclick=function(e){
        var iKeyCode;
        if(window.event){iKeyCode=window.event.keyCode;}
        else if(e.which){iKeyCode=e.which;}
        if(iKeyCode!=40 && iKeyCode!=38){
            oSuggestionBox._getSearchResult(a_sSearchBoxId);
            oSuggestionBox._suggestion=oSearchBox.value;
        }
    };
}
function TSuggestionBox_GetSearchResult(a_sSearchBoxId){//获取搜索结果
    var oBox=this._boxes[a_sSearchBoxId], oSuggestionBox=this._object, oHttpRequest;
    var iPos=this._position;
    if(!oBox) return;
    try{oHttpRequest=new XMLHttpRequest();}
    catch(e){oHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");}
    oHttpRequest.onreadystatechange=function(){
        if (oHttpRequest.readyState==4){
            if (oHttpRequest.status==200){
                var sResult=oHttpRequest.responseText;
                $(oBox[0]).innerHTML=sResult;
                if(sResult) {
                   oSuggestionBox._position=0;
                   oSuggestionBox._listenItem(a_sSearchBoxId);//监听suggestionBox中的选项
                }
            }
        }
    }
    oHttpRequest.open("post", oBox[1], true);
    oHttpRequest.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    oHttpRequest.send("keyword="+escape($(a_sSearchBoxId).value));
}
function TSuggestionBox_SetStyle(){//设置建议提示框的样式
    var oNodes=$$("li"), oNode;
    var iPos=this._position;
    for(var i=0;i<oNodes.length;i++){
        oNode=oNodes[i];
        oNode.className="";
    }
    if(iPos>=0 && iPos<oNodes.length){
        oNode=oNodes[iPos];
        oNodes[iPos].className="select";
    }
}
//隐藏建议提示框
function TSuggestionBox_Clear(a_sID){this._boxes[a_sID].innerHTML="";}
function TSuggestionBox_ListenItem(a_sSearchBoxId) {//监听SuggestionBox Item
    var oBox=this._boxes[a_sSearchBoxId];
    var oSuggestionBox=this._object;
    var iPos=this._position;
    var sFormId="";
    if(!oBox) return;
    var oObj=$(oBox[0]);
   
    if(!oObj) return;
    if(oBox.length>2) sFormId=oBox[2];
    var oItems=oObj.getElementsByTagName("li");
    if(!oItems) return;
    var oItem;
    for(var i=0;i<oItems.length;i++) {
        oItem=oItems[i];
        if(!oItem) continue;
      
        oItem.onclick=function (){//提交搜索表单
            var iPos=oSuggestionBox._position;
            var oForm=$F(sFormId);
            if(!oForm) return;
            oForm.submit();
        };
        oItem.onmouseover=function() {
            oSuggestionBox._position=this.value;
            oSuggestionBox._setStyle();
            $(a_sSearchBoxId).value=this.childNodes[0].nodeValue;
        };
      
    }
    if(oItems.length>0) oItems[0].className="select";
}