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搜索效果示例源码下载