小练习：用jQuery简单模拟百度搜索框的提示功能

浏览数：29 / 时间：2015年06月09日

　　今天第一次接触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里面的li
37         $(window).keydown(function(event){
38             //alert(event.keyCode);
39             //左：37，上：38，右：39；下：40
40             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>