首页 > 代码库 > 小练习：用jQuery简单模拟百度搜索框的提示功能
小练习：用jQuery简单模拟百度搜索框的提示功能
今天第一次接触jQuery，用jQuery模拟了一下百度搜索的自动提示功能。连带jQuery的基本知识点，简单总结如下：
首先得在工程中导入插件：jquery-1.4.2.js ，并在html的head中引入该js：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">2 <html>3 <head>4 <meta http-equiv="Content-Type" content="text/html; charset=GBK">5 <title>搜索提示</title>6 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script>7 </head>
准备好页面要显示的内容：
1 <body> 2 <div align="center"> 3 <input type="text" id="keywords"> 4 <input type="button" value="百度一下" id="searchbutton"> 5 <div class="message_area" align="left"> 6 <li>中国达人秀</li> 7 <li>中国好声音</li> 8 <li>中国好歌曲</li> 9 <li>中国好舞蹈</li>10 <li>中国好男人</li>11 <li>中国好基友</li>12 <li>中国好闺蜜</li>13 <li>中国好太太</li>14 <li>中国好嫂子</li>15 <li>中国移动</li>16 </div>17 </div>18 </body>
其中的类选择器和id选择器的样式如下：
1 <style type="text/css"> 2 #keywords { 3 font-size: 28px; 4 width: 500px; 5 } 6 7 #searchbutton { 8 font-size: 28px; 9 }10 11 .message_area {12 width: 500px;13 border: 1px solid #999;14 margin-left: -147px;15 display:none; 16 }17 18 .message_area li {19 list-style: none;20 padding: 2px;21 }22 23 .backclass{24 background:grey;25 }26 </style>
最后，定义事件：
1 <script type="text/javascript"> 2 $(function(){ 3 //焦点事件 4 $("#keywords").focus(); 5 6 //键盘松下事件 7 $("#keywords").keyup(function(){ 8 //alert($(this).val()); 9 var keyword = $(this).val();10 //对输入的字段进行处理11 if(keyword.length>0){12 //通过关键字 去后台获取数据,把获取到的数据放到message_area ，然后显示这个区域..13 $(".message_area").show();14 }else{15 $(".message_area").hide();16 }17 18 });19 20 //鼠标进入事件21 $(".message_area>li").mouseover(function(){22 $(".message_area>li").removeClass("backclass");23 $(this).addClass("backclass");24 });25 26 //鼠标离开事件27 $(".message_area>li").mouseout(function(){28 $(this).removeClass("backclass");29 });30 31 //失去焦点事件32 $("#keywords").blur(function(){33 $(".message_area").hide();34 });35 36 //监听键盘，实现上下键选择div里面的li37 $(window).keydown(function(event){38 //alert(event.keyCode);39 //左：37，上：38，右：39；下：4040 switch(event.keyCode){41 case 40:{ //处理按下下键的业务逻辑42 if($(".backclass").size()==0){43 //如果是第一次按下键44 $(".message_area>li:first").addClass("backclass");45 }else{46 //获取到当前元素然后拿它的下一个元素调用size 方法47 if($(".backclass").next().size()==0){48 $(".message_area>li:first").addClass("backclass");49 $(".message_area>li:last").removeClass("backclass");50 }else{51 $(".backclass").removeClass("backclass").next().addClass("backclass");52 }53 }54 $("#keywords").val($(".backclass").text());55 break;56 }57 case 38:{58 if($(".backclass").prev().size()==0){59 $(".message_area>li:last").addClass("backclass");60 $(".message_area>li:first").removeClass("backclass");61 }else{62 $(".backclass").removeClass("backclass").prev().addClass("backclass");63 }64 $("#keywords").val($(".backclass").text());65 break;66 }67 }68 69 });70 })71 72 </script>73 74 </html>
在程序中，提示是给定的几个固定的选项，都是以中国开头，只要在输入框中有输入，就会弹出提示框，在提示框中定义了四个事件：鼠标进入，鼠标移出，光标向上和光标向下，在光标事件中，移动光标会自动将提示显示到输入框中。
这个Demo只是一个简单的模拟，仅仅作为学习知识所用。有关jQuery的更多知识点，有待继续学习和整理。
小练习：用jQuery简单模拟百度搜索框的提示功能
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。