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>

　　<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>