自动补全功能(jquery应用5)

来源：互联网发布：会计资格考试软件下载编辑：程序博客网时间：2024/06/05 21:58

A:编写服务端代码：AutoComplete.java

public class AutoComplete extends HttpServlet{    @Override    protected void doGet(HttpServletRequest req, HttpServletResponse resp)        throws ServletException, IOException    {      //返回数据试图层(ajax)       req.getRequestDispatcher("word.xml").forward(req, resp);     }    @Override    protected void doPost(HttpServletRequest req, HttpServletResponse resp)        throws ServletException, IOException    {        doGet(req, resp);    }    }

B:配置该servlet web.xml

<servlet>    <servlet-name>autoComplete</servlet-name>    <servlet-class>com.itany.ajax.servler.AutoComplete</servlet-class>  </servlet>    <servlet-mapping>     <servlet-name>autoComplete</servlet-name>     <url-pattern>/autoComplete</url-pattern>    </servlet-mapping>

C:编写word.xml

<?xml version="1.0" encoding="UTF-8"?><words>  <word>absolute</word> <word>anyone</word> <word>anything</word>  <word>book</word>  <word>boom</word>  <word>apple</word>  <word>abandon</word>  <word>breach</word>  <word>break</word>  <word>boolean</word>  <word>bold</word>  <word>bride</word>  <word>brown</word>  <word></word> </words>

D:编写页面：jqueryautocomplete.html

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript" src="js/jquery-1.4.js"></script><script type="text/javascript" src="js/jqueryAuto2.js"></script><title>Insert title here</title></head><body><input id="word"/><input type="button" value="提交"><br/><br/><br/><br/><br/><br/><br/><!-- 内容列表 --><div id="auto"></div></body></html>

E:编写js:jqueryAuto.js
    完善点1：通过js编写弹出框的样式
    完善点2：增加键盘(向上、向下选中、回车键)事件
js:jqueryAuto.js----jqueryAuto1.js
    完善点3：解决滑动门问题
    在键盘输入过快时，不执行操作，给它一个延迟。
js:jqueryAuto1.js----jqueryAuto2.js

//定义当前高亮显示节点的下标索引var highlightindex=-1;//定义延时器变量var timeoutid;jQuery(function(){ //alert(1); //找到下拉列表div var autoNode=$("#auto"); //获取输入框对象 var wordInput=$("#word"); //创建输入框的偏移量对象 var wordInputOffset = wordInput.offset(); //隐藏该下拉框 //设置弹出框的样式 autoNode.hide().css("border","1px black solid") //.css("width",wordInput.width()+2+"px") .width(wordInput.width()+2+"px") .css("position","absolute") .css("left",wordInputOffset.left+"px") .css("top",wordInputOffset.top+wordInput.height()+5+"px"); //对输入框绑定keyup事件 wordInput.keyup(function(event){  //判断输入框中是否输入a-z(65-90)、退格(8)、删除(46)  //IE/FF  var myEvent = event || window.event;  var kcode = myEvent.keyCode;  //alert(kcode);  if ((kcode >= 65 && kcode <= 90 || kcode == 8 || kcode == 46)) {   //alert(kcode);   //alert(2);   //获取输入框的内容   var wordtext = wordInput.val();   //如果输入框有内容，执行查询，显示下拉框，否则隐藏下拉框   if (wordtext != "") {    //取消延时器    clearTimeout(timeoutid);    //设置延迟器    timeoutid = setTimeout(function(){    //将该值发送到服务端    $.post("autoComplete", null, function(data){     //alert(data);     var jqueryObj = $(data);     //找到所有的word节点     var wordnodes = jqueryObj.find("word");     //alert(wordnodes.length);     //清空原来的内容     autoNode.html("");     //遍历该集合     wordnodes.each(function(){      //获取当前值对象      var wordnode = $(this);      //alert(wordnode.text());      //判断返回值是否以输入域的值开头      if (wordnode.text().indexOf(wordtext) == 0) {       //alert(wordnode.text());       $("<div>").html(wordnode.text()).appendTo(autoNode);      }     });          //如果服务器有返回，显示下拉列表     if (wordnodes.length > 0) {      autoNode.show();     }         });    },1000);       }   else {    autoNode.hide();    //将索引值重置为-1    highlightindex=-1;   }  }  //向上键38  else if(kcode==38){   //获取div节点数组   var autoNodes=autoNode.children("div");   if(highlightindex==-1){    //索引值为-1，将索引值指向最后一个元素    highlightindex = autoNodes.length-1;   }   else{    //如果原来存在高亮节点，则将其背景色还原成白色    autoNodes.eq(highlightindex)    .css("background-color","white");    //索引键-1    highlightindex--;   }   //让现在的这个记录背景色变成#eee   autoNodes.eq(highlightindex)   .css("background-color","#eee");     }  //向下键40  else if(kcode==40){   //获取div节点数组   var autoNodes=autoNode.children("div");   if(highlightindex!=-1){    //将原来的节点背景色改成白色    autoNodes.eq(highlightindex)    .css("background-color","white");   }   highlightindex++;   //最大值，则重新设置索引值为0   if(highlightindex == autoNodes.length){    highlightindex =0;   }   //将新节点的背景色改为#eee   autoNodes.eq(highlightindex)   .css("background-color","#eee");  }  //回车键13  else if(kcode==13){   //获取div节点数组   var autoNodes=autoNode.children("div");   //如果有高亮显示节点   if(highlightindex!=-1){    //取出高亮节点内容    var comText=autoNodes.eq(highlightindex).text();    highlightindex=-1;    //在文本框中显示该高亮节点内容    wordInput.val(comText);    autoNode.hide();   }   else{    //下拉框没有高亮内容    alert("文本框中的【"+wordInput.val()+"】被提交了。");    //让word输入框失去焦点    wordInput.blur();   }  }     }); //给按钮绑定一个click事件，显示文本框中的数据已被提交 $("input[type='button']").click(function(){  //alert(1);  alert("文本框中的【"+wordInput.val()+"】被提交了。"); }); });