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

最新推荐文章于 2022-04-02 21:34:26 发布

kandy_java

最新推荐文章于 2022-04-02 21:34:26 发布

阅读量587

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/u010866487/article/details/9001051

版权

ajax 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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()+"】被提交了。");
 });
 
});