A股上市公司传智教育（股票代码 003032）旗下技术交流社区北京昌平校区

传智教育官网黑马程序员官网

 找回密码
 加入黑马
论坛首页 › 隐藏归类 › 黑马那些年 › 第3届JavaEE+hadoop大数据技术交流 › 正文

请问，jquery怎么控制文本框自动补全

© 李希鹏 中级黑马   /  2013-4-9 21:41  /  2176 人查看  /  2 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 李希鹏 于 2013-4-10 08:12 编辑

RT，模仿搜索引擎

评分

参与人数 1技术分 +1 收起 理由
陈丽莉 + 1

查看全部评分

2 个回复

倒序浏览
王怀亮 中级黑马 2013-4-9 21:59:16
| 只看该作者
沙发
HTML代码：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3. <head runat="server">
  4.     <title>无标题页</title>
  5.     <script src="js/advance/jquery.js" type="text/javascript"></script>  
  6.     <script src="js/advance/test.js" type="text/javascript"></script>  
  7. <style>
  8.     body   
  9. {   
  10.   font-family:Arial;   
  11.   font-size:14px;   
  12.   padding:0px;   
  13.   margin:10px;   
  14. }   
  15. .txt1   
  16. {   
  17.     /* 用户输入框的样式 */   
  18.     width:200px;   
  19. }   
  20. #popup   
  21. {   
  22.     /* 提示框div块的样式 */   
  23.     position:absolute;   
  24.     left:80px;   
  25.     top:32px;   
  26.     width:204px;   
  27.     /*border:solid 1px black;*/   
  28.     color:#004a7e;   
  29. }   
  30. #popup.show1{   
  31.     /* 显示提示框的边框 */     
  32.     border:1px solid #004a7e;   
  33. }   
  34. ul{   
  35.     list-style:none;   
  36.     margin:0px; padding:0px;   
  37.     color:#004a7e;   
  38. }   
  39. li.mouseOver{   
  40.     background-color:#004a7e;   
  41.     color:#FFFFFF;   
  42. }  
  43. </style>
  44.     </head>
  45. <body>
  46.     <form id="form1" runat="server">
  47.      <div id="con">  
  48.         自动补全：<input id="txt1" type="text"   class ="txt1" onkeyup="findcon();"/>  
  49.     </div>  
  50.      <div id="popup">  
  51.         <ul id="con_ul" class="show1"></ul>  
  52.      </div>
  53.          <div>   
  54.     </div>   
  55.     </form>
  56. </body>
  57. </html>
复制代码
JS代码：
  1. var hightlight =-1;   
  2. var oInputField;    //考虑到很多函数中都要使用   
  3. var oPopDiv;        //因此采用全局变量的形式   
  4. var oconUl;   
  5. function initVars(){   
  6.     //初始化变量   
  7.     oInputField = $("#txt1");   
  8.     oPopDiv = $("#popup");   
  9.     oconUl = $("#con_ul");   
  10. }   
  11. function clearcon(){   
  12.     //清除提示内容   
  13.     oconUl.empty();   
  14.     oPopDiv.removeClass("show");   
  15. }   
  16. function setcon(the_con){   
  17.     //显示提示框，传入的参数即为匹配出来的结果组成的数组   
  18.     clearcon(); //每输入一个字母就先清除原先的提示，再继续   
  19.     oPopDiv.addClass("show");   
  20.     for(var i=0;i<the_con.length;i++)   
  21.         //将匹配的提示结果逐一显示给用户   
  22.         oconUl.append($("<li>"+the_con[i]+"</li>"));   
  23.     oconUl.find("li").click(function(){   
  24.         oInputField.val($(this).text());   
  25.         clearcon();   
  26.     }).hover(   
  27.         function(){$(this).addClass("mouseOver");},   
  28.         function(){$(this).removeClass("mouseOver");}   
  29.     );   
  30. }   
  31. function findcon(event){   
  32.     initVars();     //初始化变量   
  33.     var myEvent = event || window.event;   
  34.     var keycode = myEvent.keyCode;   //获取键盘键值   
  35.     if ((keycode >= 65 && keycode <= 90) || keycode==8 || keycode == 46) {   
  36.         if(oInputField.val().length > 0){   
  37.             //获取异步数据   
  38.             var url="handler/test.ashx?parms="+oInputField.val();   
  39.             $.get(url,function(data){   
  40.                     var aResult = new Array();   
  41.                     if(data.length > 0){   
  42.                         aResult = data.split(",");   
  43.                         setcon(aResult);    //显示服务器结果   
  44.                     }   
  45.                     else  
  46.                         clearcon();   
  47.             });   
  48.         }   
  49.         else{   
  50.             clearcon(); //无输入时清除提示框（例如用户按del键）   
  51.             hightlight = -1   
  52.         }      
  53.       }else if(keycode==38||keycode==40){  //如果输入的是向上向下   
  54.                
  55.             if(keycode==38){   
  56.             //向上   
  57.               var autoNodes = oconUl.find("li");   
  58.                
  59.                if (hightlight != -1 ){   
  60.                 //把高亮节点恢复   
  61.                 autoNodes.eq(hightlight).removeClass("mouseOver");   
  62.                 hightlight--;   
  63.                }else{   
  64.                 hightlight = autoNodes.length - 1   
  65.                }   
  66.                   
  67.                if(hightlight == -1){   
  68.                 //如果到顶 把高亮移动到最后   
  69.                 hightlight = autoNodes.length - 1;   
  70.                };   
  71.                autoNodes.eq(hightlight).addClass("mouseOver");     
  72.             }   
  73.             if(keycode==40){   
  74.             //向下   
  75.                var autoNodes =oconUl.find("li");   
  76.                if (hightlight != -1 ){   
  77.                 //把高亮节点恢复   
  78.                 autoNodes.eq(hightlight).removeClass("mouseOver");   
  79.                }   
  80.                hightlight++;   
  81.                if(hightlight == autoNodes.length){   
  82.                 //如果到顶 把高亮移动到最后   
  83.                 hightlight = 0;   
  84.                }   
  85.                autoNodes.eq(hightlight).addClass("mouseOver");   
  86.             }         
  87.         }else if (keycode==13){   
  88.             //如果输入的是回车            
  89.             if(hightlight!=-1){   
  90.                 //取出节点的内容   
  91.                 var context = oconUl.find("li").eq(hightlight).text();   
  92.                 clearcon();   
  93.                 hightlight = -1;   
  94.                 oInputField.val(context);   
  95.             }   
  96.                
  97.         }   
  98. }  
复制代码

评分

参与人数 1技术分 +2 收起 理由
陈丽莉 + 2

查看全部评分

回复 使用道具 举报
李希鹏 中级黑马 2013-4-10 08:08:28
| 只看该作者
藤椅
王怀亮 发表于 2013-4-9 21:59
HTML代码：JS代码：

:handshake
有个思路就行了
回复 使用道具 举报
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 加入黑马