DWR實現類比Google搜尋效果

<!-- 類比google搜尋 --><script type="text/javascript">  /********************************可配置選項********************************/    // 被選中的相似關鍵字背景顏色    var selectedBgColor = "#CCCCCC";    // 未被選中的相似關鍵字背景顏色    var unselectedBgColor = "#FFFFFF";    // 相似關鍵字列表框的邊框    var listBorder = "1 solid #000000";     /***************************************************************************/      /********************************不可配置選項********************************/        // 上一次輸入的關鍵字（用來判斷關鍵字是否有改變，沒有則不再去服務端重新擷取提示關鍵字）    var oldKeyValue;    // 滑鼠相對於提示關鍵字列表框的位置（0：提示框外面，1：提示框裡面）    var mouseLocation = 0;    // 當前選中的提示關鍵字索引（從0開始，等於-1表示沒有被選中項）    var selectedKeyIndex = -1;     // 上一次選中的提示關鍵字索引（從0開始，等於-1表示沒有上次被選中項）    var oldSelectedKeyIndex = -1;    // 提示關鍵字總數    var tdCount = 0;        /***************************************************************************/          /*        用途：給String對象添加去除左右空格方法    */     String.prototype.trim = function() {      var m = this.match(/^\s*(\S+(\s+\S+)*)\s*$/);      return (m == null) ? "" : m[1];    }        /*        用途:初始化提示關鍵字列表框的狀態    */     function initKeyListState(){        selectedKeyIndex = -1;         oldSelectedKeyIndex = -1;        tdCount = 0;    }        /*        用途:將上一次選中的關鍵字項變為未選中    */     function disSelectedOldKey(){          //判斷說明：oldSelectedKeyIndex!=selectedKeyIndex          //        當只有一個相似關鍵字的時候，則不存在上一次選中和這次選中關鍵字，          //        只要第一次選中後，按向上或向下箭頭都是選中。        if (oldSelectedKeyIndex!=-1&&oldSelectedKeyIndex!=selectedKeyIndex){              $('keyId'+ oldSelectedKeyIndex).bgColor=unselectedBgColor;          }              // 上一次選中項更新          oldSelectedKeyIndex = selectedKeyIndex;    }        /*        用途:當按上下箭頭時選中新的提示關鍵字項，按斷行符號時將選中的提示關鍵字輸入到搜尋方塊。    */     function setSelectedKey(){        // $('keyId0')存在表示有相關提示關鍵字，不存在則不處理。        if($('keyId0')){           if (event.keyCode==38){            //------處理向上事件------              if (selectedKeyIndex==-1){                  selectedKeyIndex = tdCount-1;              }else{                  selectedKeyIndex= (selectedKeyIndex+tdCount-1)%tdCount;              }              $('keyId'+ selectedKeyIndex).bgColor= selectedBgColor;                  disSelectedOldKey();          }else if (event.keyCode==40){            //------處理向下事件------              if (selectedKeyIndex==-1){                  selectedKeyIndex = 0;              }else{                  selectedKeyIndex = (selectedKeyIndex+1)%tdCount;              }              $('keyId'+ selectedKeyIndex).bgColor= selectedBgColor;              disSelectedOldKey();              }else if (event.keyCode==13){            //------處理斷行符號事件------              $('cond').value=$('keyId'+ selectedKeyIndex).innerText;              setCursorLast($('cond'));              // 隱藏提示關鍵字列表框              $('dropdownlistDiv').style.display='none';          }      }    }        /*        用途:擷取相似關鍵字    */     function getConformKey(){      //得到輸入的關鍵字      var keyValue = $('cond').value.trim();      // 如果這次的查詢關鍵字和上次的一樣，則不去伺服器重新擷取相似關鍵字列表。      if (keyValue!=oldKeyValue){          // 關鍵字為空白則不去伺服器擷取相似關鍵字列表          if (keyValue==''){              DWRUtil.removeAllRows('showKeyList');              setDropListVisible(false);              initKeyListState();          }else{              //採用ajax非同步模式擷取相似關鍵字(這裡的useraction,改成自己的action)              useraction.findByLike(keyValue,conformKeyCallback);          }      }    }        /*        用途:擷取關鍵字回調方法    */     function conformKeyCallback(keyList){        DWRUtil.removeAllRows('showKeyList');        initKeyListState();        if (keyList.length>0){            // 產生相似關鍵字提示框            DWRUtil.addRows('showKeyList',keyList,cellFuncs, {                 cellCreator:function(options) {                  var td = document.createElement("td");                  td.id = 'keyId' + tdCount++;                  td.onmouseover = function (){selectedKeyIndex=parseInt(this.id.substring(5,td.id.length));this.bgColor=selectedBgColor;disSelectedOldKey();};                  td.onclick= function (){                      $('cond').value=this.innerText;                      $('cond').focus();                    setCursorLast($('cond'));                    $('dropdownlistDiv').style.display='none';                  };                  return td;                },escapeHtml:false});            setDropListVisible(true);        }else{            setDropListVisible(false);        }    }        /*        用途:表格式資料顯示處理方法    */     var cellFuncs = [      function(data) { return data.username; }    ];        /*        用途:將輸入框的游標移到最後    */     function setCursorLast(inputObj){        var inputRange = inputObj.createTextRange();          inputRange.collapse(true);        inputRange.moveStart('character',inputObj.value.length);         inputRange.select();    }                /*        用途:建立相似關鍵字列表框    */     function createShowDiv(){        var showDiv = document.createElement("div");        showDiv.id = "dropdownlistDiv";           with(showDiv.style){              position = "absolute";            //層的絕對位置從這調整             left = parseInt($('cond').style.left.replace('px',''))+190;            top = parseInt($('cond').style.top.replace('px',''))+parseInt($('cond').style.height.replace('px',''))+28;           width = parseInt($('cond').style.width.replace('px',''));             border = listBorder;             zIndex = "1";              display='none';           backgroundColor = unselectedBgColor;           }        showDiv.onmouseover=function (){mouseLocation=1;};        showDiv.onmouseout=function (){mouseLocation=0;};        //overflow設定捲軸        showDiv.innerHTML = "<div style='width:100%;height:150px;overflow:auto;'><table border='0' style='width: 100%;height:20%;font-size: 12;color:#33CC00;'><tbody id='showKeyList' style='margin-left: 0;margin-right: 0;margin-bottom: 0;margin-top: 0;'></tbody></table></div>";        document.body.appendChild(showDiv);        initKeyListState();    }          /*        用途:設定相似關鍵字列表框是否可見        參數：isDisplay，true表示可見，false表示不可見    */     function setDropListVisible(isDisplay){        if (mouseLocation == 1){            return;        }        if (($('cond').value.trim()!='')&&(isDisplay==true)){            $('dropdownlistDiv').style.display='';        }        else{            $('dropdownlistDiv').style.display='none';        }    }        // 將建立相似關鍵字列表框方法附加到onload事件中    if (window.addEventListener){       window.addEventListener('load', createShowDiv, false);    }else if (window.attachEvent){       window.attachEvent('onload', createShowDiv);    }    </script>

這個js可以放在你需要實現搜尋效果的jsp裡,或單獨儲存為js檔案都可以.

<div style="position:absolute;left:190px;top:25px;">    <input AUTOCOMPLETE="off"         onkeydown="oldKeyValue=this.value.trim();setSelectedKey();"         onkeyup="getConformKey();"         onfocus="if(this.value=='找人') this.value='';setDropListVisible(true);"         onblur="setDropListVisible(false);"        style="width: 300; height: 23;z-index: 10;top:0;left:0;"  type="text" name="cond" value="找人" id="cond" />    <input type="button" class="btn" value="搜一下"  onclick="findBylike();" /></div>

useraction.findByLike(String name);是dao層的一個查詢方法,
返回一個List,把這裡換成你自己的實現就可以了.

完美實現google搜尋效果樣本源碼下載