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,把这里换成你自己的实现就可以了.