首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

dwr兑现搜索自动补全功能(键盘鼠标均可,类似百度)

2012-11-07 
dwr实现搜索自动补全功能(键盘鼠标均可,类似百度)上段时间想做一个百度等搜索自动提示补全的功能。于是从网

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 name="type" value="0" />全部     <input type="radio" name="type" value="1" />作者     <input type="radio" name="type" value="2" checked="checked"/>书名</div><div name="key" id="key" value="${key }"  onkeyup="autoComplete.start(event);" autocomplete="off"/>     <input type="submit" name="Submit" value="" ></div>    <a href="search/hibernateSearch.htm?action=advancedSearchForward" title="高级检索">高级检索</a></div><script>   var autoComplete = new AutoComplete('key','auto',['1','11']); </SCRIPT></form>

热点排行