<!-- 模擬google搜索 -->
<script type="text/javascript">
/********************************可配置選項(xiàng)********************************/
// 被選中的相似關(guān)鍵字背景顏色
var selectedBgColor = "#CCCCCC";
// 未被選中的相似關(guān)鍵字背景顏色
var unselectedBgColor = "#FFFFFF";
// 相似關(guān)鍵字列表框的邊框
var listBorder = "1 solid #000000";
/***************************************************************************/
/********************************不可配置選項(xiàng)********************************/
// 上一次輸入的關(guān)鍵字（用來判斷關(guān)鍵字是否有改變，沒有則不再去服務(wù)端重新獲取提示關(guān)鍵字）
var oldKeyValue;
// 鼠標(biāo)相對(duì)于提示關(guān)鍵字列表框的位置（0：提示框外面，1：提示框里面）
var mouseLocation = 0;
// 當(dāng)前選中的提示關(guān)鍵字索引（從0開始，等于-1表示沒有被選中項(xiàng)）
var selectedKeyIndex = -1;
// 上一次選中的提示關(guān)鍵字索引（從0開始，等于-1表示沒有上次被選中項(xiàng)）
var oldSelectedKeyIndex = -1;
// 提示關(guān)鍵字總數(shù)
var tdCount = 0;
/***************************************************************************/
/*
用途：給String對(duì)象添加去除左右空格方法
*/
String.prototype.trim = function() {
var m = this.match(/^\s*(\S+(\s+\S+)*)\s*$/);
return (m == null) ? "" : m[1];
}
/*
用途:初始化提示關(guān)鍵字列表框的狀態(tài)
*/
function initKeyListState(){
selectedKeyIndex = -1;
oldSelectedKeyIndex = -1;
tdCount = 0;
}
/*
用途:將上一次選中的關(guān)鍵字項(xiàng)變?yōu)槲催x中
*/
function disSelectedOldKey(){
//判斷說明：oldSelectedKeyIndex!=selectedKeyIndex
// 當(dāng)只有一個(gè)相似關(guān)鍵字的時(shí)候，則不存在上一次選中和這次選中關(guān)鍵字，
// 只要第一次選中后，按向上或向下箭頭都是選中。
if (oldSelectedKeyIndex!=-1&&oldSelectedKeyIndex!=selectedKeyIndex){
$('keyId'+ oldSelectedKeyIndex).bgColor=unselectedBgColor;
}
// 上一次選中項(xiàng)更新
oldSelectedKeyIndex = selectedKeyIndex;
}
/*
用途:當(dāng)按上下箭頭時(shí)選中新的提示關(guān)鍵字項(xiàng)，按回車時(shí)將選中的提示關(guān)鍵字輸入到搜索框。
*/
function setSelectedKey(){
// $('keyId0')存在表示有相關(guān)提示關(guān)鍵字，不存在則不處理。
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'));
// 隱藏提示關(guān)鍵字列表框
$('dropdownlistDiv').style.display='none';
}
}
}
/*
用途:獲取相似關(guān)鍵字
*/
function getConformKey(){
//得到輸入的關(guān)鍵字
var keyValue = $('cond').value.trim();
// 如果這次的查詢關(guān)鍵字和上次的一樣，則不去服務(wù)器重新獲取相似關(guān)鍵字列表。
if (keyValue!=oldKeyValue){
// 關(guān)鍵字為空則不去服務(wù)器獲取相似關(guān)鍵字列表
if (keyValue==''){
DWRUtil.removeAllRows('showKeyList');
setDropListVisible(false);
initKeyListState();
}else{
//采用ajax異步模式獲取相似關(guān)鍵字(這里的useraction,改成自己的action)
useraction.findByLike(keyValue,conformKeyCallback);
}
}
}
/*
用途:獲取關(guān)鍵字回調(diào)方法
*/
function conformKeyCallback(keyList){
DWRUtil.removeAllRows('showKeyList');
initKeyListState();
if (keyList.length>0){
// 生成相似關(guān)鍵字提示框
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);
}
}
/*
用途:表格數(shù)據(jù)顯示處理方法
*/
var cellFuncs = [
function(data) { return data.username; }
];
/*
用途:將輸入框的光標(biāo)移到最后
*/
function setCursorLast(inputObj){
var inputRange = inputObj.createTextRange();
inputRange.collapse(true);
inputRange.moveStart('character',inputObj.value.length);
inputRange.select();
}
/*
用途:創(chuàng)建相似關(guān)鍵字列表框
*/
function createShowDiv(){
var showDiv = document.createElement("div");
showDiv.id = "dropdownlistDiv";
with(showDiv.style){
position = "absolute";
//層的絕對(duì)位置從這調(diào)整
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設(shè)置滾動(dòng)條
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();
}
/*
用途:設(shè)置相似關(guān)鍵字列表框是否可見
參數(shù)：isDisplay，true表示可見，false表示不可見
*/
function setDropListVisible(isDisplay){
if (mouseLocation == 1){
return;
}
if (($('cond').value.trim()!='')&&(isDisplay==true)){
$('dropdownlistDiv').style.display='';
}
else{
$('dropdownlistDiv').style.display='none';
}
}
// 將創(chuàng)建相似關(guān)鍵字列表框方法附加到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>