DWR实现模拟Google搜索效果实现原理及代码

复制代码 代码如下: /********************************可配置选项********************************/ // 被选中的相似关键字背景颜色 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 = " "; 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); } 这个js可以放在你需要实现搜索效果的jsp里,或单独保存为js文件都可以. 复制代码 代码如下: 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" /> useraction.findByLike(String name);是dao层的一个查询方法, 返回一个List,把这里换成你自己的实现就可以了.

DWR实现模拟Google搜索效果实现原理及代码_javascript技巧