jquery自动补全.docxVIP

2009-05-18JQuery实现文本框自动补全(修改版)文章分类:Web前端 关键字: jquery 自动补全 鼠标、键盘功能齐全 采用JQuery和.net中的一般处理程序实现文本框的自动补全，鼠标、键盘功能齐全Html代码 !DOCTYPE?html?PUBLIC?-//W3C//DTD?XHTML?1.0?Transitional//EN?/TR/xhtml1/DTD/xhtml1-transitional.dtd????html?xmlns=/1999/xhtml??head?runat=server??????title自动补全/title??????link?href=css/test.css?rel=stylesheet?type=text/css?/??????script?src=js/jquery.js?type=text/javascript/script??????script?src=js/test.js?type=text/javascript/script??/head??body??????div?id=con??????????自动补全：input?id=txt1?type=text??CssClass?=txt1?onkeyup=findcon();/??????/div???????div?id=popup??????????ul?id=con_ul/ul???????/div??/body??/html??!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=/1999/xhtmlhead runat=server title自动补全/title link href=css/test.css rel=stylesheet type=text/css / script src=js/jquery.js type=text/javascript/script script src=js/test.js type=text/javascript/script/headbody div id=con 自动补全：input id=txt1 type=text CssClass =txt1 onkeyup=findcon();/ /div div id=popup ul id=con_ul/ul /div/body/htmltest.js文件Javascript代码 var?hightlight?=-1;? ??var?oInputField;????//考虑到很多函数中都要使用 ??var?oPopDiv;????????//因此采用全局变量的形式 ??var?oconUl; ??function?initVars(){ ??????//初始化变量 ??????oInputField?=?$(#txt1); ??????oPopDiv?=?$(#popup); ??????oconUl?=?$(#con_ul); ??} ??function?clearcon(){ ??????//清除提示内容 ??????oconUl.empty(); ??????oPopDiv.removeClass(show); ??} ??function?setcon(the_con){ ??????//显示提示框，传入的参数即为匹配出来的结果组成的数组 ??????clearcon();?//每输入一个字母就先清除原先的提示，再继续 ??????oPopDiv.addClass(show); ??????for(var?i=0;ithe_con.length;i++) ??????????//将匹配的提示结果逐一显示给用户 ??????????oconUl.append($(li+the_con[i]+/li)); ??????oconUl.find(li).click(function(){ ??????????oInputField.val($(this).text()); ??????????clearcon(); ??????}).hover( ??????????function(){$(this).addClass(mouseOver);}, ??????????function(){$(this).removeClass(mouseOver);} ??????); ??} ??function?findcon(event){ ??????initVars()