dwr实现搜索自动补全功能（键盘鼠标均可，类似百度）

上段时间想做一个百度等搜索自动提示补全的功能。于是从网上弄了点资料实现了第一个版本，但光标事件没有实现。于是又从网上弄了点资料，这个版本的作者我记不清楚了，对他说声对不起，由于这个版本的数据是在页面上写的死数据，所以个人把这个地方改成用DWR从后台取的数据，数据封装形式为List<javaBean>。修改后完成鼠标，方向键，ESC键以及失去焦点后所有的功能。程序中你也可以把AutoComplete类修改成两个参数的类，我这里还是沿用三个参数，初始化时只是随便给了一条数据，真正的数据是从后台刷出来的。当然也可以把取数据的改成AJAX等其他方式。效果图如下：

以下是代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
	<script type='text/javascript' src="<c:url value='/dwr/interface/SearchAuto.js'/>"></script>  
	<script type='text/javascript' src="<c:url value='/dwr/engine.js'/>"></script>
	<script type='text/javascript' src="<c:url value='/dwr/util.js'/>"></script>	
	<style>
.auto_hidden {
    width:204px;border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
    position:absolute;
    display:none;
}
.auto_show {
    width:204px;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
    position:absolute;
    z-index:9999; /* 设置对象的层叠顺序 */
    display:block;
}
.auto_onmouseover{
    color:#ffffff;
    background-color:highlight;
    width:100%;
}
.auto_onmouseout{
    color:#000000;
    width:100%;
    background-color:#ffffff;
}
</style>
<script type="text/javascript">
	//验证	
	function validate(){
	   var key = document.getElementById("key").value;
	   if(key ==""){
	      alert("请输入检索内容！");
	      return false;
	   }
	   return true;	   
	}
</script>

<script language="javascript">
	<!--
	/*
	通用: 自动补全(仿百度搜索框)
	*/
	var get$ = function (id) {
	    return "string" == typeof id ? document.getElementById(id) : id;
	}
	var Bind = function(object, fun) {
	    return function() {
	        return fun.apply(object, arguments);
	    }
	}
	function AutoComplete(obj,autoObj,arr){
	    this.obj=get$(obj);        //输入框
	    this.autoObj=get$(autoObj);//DIV的根节点
	    this.value_arr=arr;        //不要包含重复值
	    this.index=-1;          //当前选中的DIV的索引
	    this.search_value="";   //保存当前搜索的字符
	}
	AutoComplete.prototype={
    //初始化DIV的位置
    init: function(){
        this.autoObj.style.left = this.obj.offsetLeft+"px" ;
        this.autoObj.style.top  = this.obj.offsetTop + this.obj.offsetHeight + "px";
        this.autoObj.style.width= this.obj.offsetWidth - 2 + "px";//减去边框的长度2px   
    },
    //删除自动完成需要的所有DIV
    deleteDIV: function(){
        while(this.autoObj.hasChildNodes()){
            this.autoObj.removeChild(this.autoObj.firstChild);
        }
        this.autoObj.className="auto_hidden";
    },
    //设置值
    setValue: function(_this){
        return function(){
            _this.obj.value=this.seq;
            _this.autoObj.className="auto_hidden";
        }       
    },
    //模拟鼠标移动至DIV时，DIV高亮
    autoOnmouseover: function(_this,_div_index){
        return function(){
            _this.index=_div_index;
            var length = _this.autoObj.children.length;
            for(var j=0;j<length;j++){
                if(j!=_this.index ){       
                    _this.autoObj.childNodes[j].className='auto_onmouseout';
                }else{
                    _this.autoObj.childNodes[j].className='auto_onmouseover';
                }
            }
        }
    },
    //更改classname
    changeClassname: function(length){
        for(var i=0;i<length;i++){
            if(i!=this.index ){       
                this.autoObj.childNodes[i].className='auto_onmouseout';
            }else{
                this.autoObj.childNodes[i].className='auto_onmouseover';
                this.obj.value=this.autoObj.childNodes[i].seq;
            }
        }
    }
    ,
    //响应键盘
    pressKey: function(event){
        var length = this.autoObj.children.length;   
        //ESC键  
        if(event.keyCode == 27){
           document.getElementById("auto").className="auto_hidden";
        }
        //光标键"↓"
        if(event.keyCode==40){
            ++this.index;
            if(this.index>length){
                this.index=0;
            }else if(this.index==length){
                this.obj.value=this.search_value;
            }

            this.changeClassname(length);
        }
        //光标键"↑"
        else if(event.keyCode==38){
            this.index--;
            if(this.index<-1){
                this.index=length - 1;
            }else if(this.index==-1){
                this.obj.value=this.search_value;
            }                      
            this.changeClassname(length);
            
        }
        //回车键
        else if(event.keyCode==13){
            this.autoObj.className="auto_hidden";
            this.index=-1;
        }else{
            this.index=-1;
        }
    },
    //程序入口
    start: function(event){
    
           //取数据
	 	   var data = new Array() ;
		   var key = document.getElementById('key').value;
		   if(key != null && key.trim() !=""){
			   DWREngine.setAsync(false);
		       SearchAuto.getResourcesInfoByDwr(key,{
		       		callback:function callback(msg){
		       		   //调用单独的回调函数
					   for(var i = 0 ;i<msg.length;i++){
					      data.push(msg[i].erinName);
					   }
		       		},
		            errorHandler:function errors(){
		              //do nothing
		            }
		       });    
		       DWREngine.setAsync(true);
	       }
           this.value_arr=data;        //数据变化时重新赋值
		       
		//键盘        
        if(event.keyCode!=13&&event.keyCode!=38&&event.keyCode!=40){
            this.init();
            this.deleteDIV();
            this.search_value=this.obj.value;
            var valueArr=this.value_arr;
            valueArr.sort();
            if(this.obj.value.replace(/(^\s*)|(\s*$)/g,'')==""){ return; }//值为空，退出
            try{ var reg = new RegExp("(" + this.obj.value + ")","i");}
            catch (e){ return; }
            var div_index=0;//记录创建的DIV的索引
            for(var i=0;i<valueArr.length;i++){
                if(reg.test(valueArr[i])){
                    var div = document.createElement("div");
                    div.className="auto_onmouseout";
                    div.seq=valueArr[i];
                    div.onclick=this.setValue(this);
                    div.onmouseover=this.autoOnmouseover(this,div_index);
                    div.innerHTML=valueArr[i].replace(reg,"<strong>$1</strong>");//搜索到的字符粗体显示
                    this.autoObj.appendChild(div);
                    this.autoObj.className="auto_show";
                    div_index++;
                }
            }
        }
        this.pressKey(event);
        window.onresize=Bind(this,function(){this.init();});
    }
}

      //失去焦点时关闭提示框
	  document.onclick = function(e)
	  {
	    var event = window.event || e;
	    var ele = event.srcElement || event.target;
	    if(ele.id != "autoComplete" && ele.id !="key"){
	        document.getElementById("auto").className="auto_hidden";
	    }
	  }

//-->
</SCRIPT>
<form id="form1" name="form1" method="post" action="search/hibernateSearch.htm?action=searchAllResources" onsubmit="return validate();">    
   <div class="searchtop">
	  <input type="radio" name="type" value="0" />全部
	     <input type="radio" name="type" value="1" />作者
	     <input type="radio" name="type" value="2" checked="checked"/>书名
	</div>
	<div class="searchmain bugc">
	     <input type="text" name="key" id="key" value="${key }" class="inputa"  onkeyup="autoComplete.start(event);" autocomplete="off"/>
	     <input type="submit" name="Submit" value="" class="btna"/>
	     <div id="auto" class="auto_hidden" ></div>
    <a href="search/hibernateSearch.htm?action=advancedSearchForward" title="高级检索">高级检索</a></div>
<script>
   var autoComplete = new AutoComplete('key','auto',['1','11']); 
</SCRIPT>
</form>