JS JQuery 模拟百度搜索上下键选取

先看效果图

下面来看代码：

首先是HTML代码，这里我选择的是li，当然你可以可以用其他的比如说table或div

View Code

 1     <div class="search">
 2            <span><input id="search_text" class="search_text" onblur="if (value ==''){value='搜微博、找人'}" onfocus="if (value =='搜微博、找人'){value =''}" oninput="SearchInput(this);" onPropertyChange="SearchInput(this);"  type="text" /></span><span><input class="search_button" id="btnSearch" onclick="Search();" type="button" /></span>
 3         <!--搜索弹出框 start-->
 4          <div class="search_boder_z" id="search_show">
 5             <li class="title">&nbsp;&nbsp;&nbsp;请选择搜索范围</li>
 6             <li style="background:#E8F4FC;" class="microblog"><span>包含<cite>xXx</cite>的广播</span></li>
 7             <li class="account" style=""><span>包含<cite>xXx</cite>的人</span></li>
 8             <li class="group"><span>包含<cite>xXx</cite>的社团</span></li>
 9          </div>
10          <!--搜索弹出框 end-->
11     </div>

接下来是JS代码

View Code

 1 var index = 1;//当前li
 2 var search_show = $(".search");
 3 var type  = 'microblog';//当前搜索类型
 4 
 5 $("#search_text").keydown(function (event) {//上下键获取焦点
 6             var key = event.keyCode;
 7             if (key == 13) Search(); /*回车搜索*/
 8 
 9             if ($.trim($(this).val()).length == 0)
10                 return;
11 
12             search_show.show();
13 
14             if (key == 38) { /*向上按钮*/
15                 index--;
16                 if (index == 0) index = 4; //到顶了，
17             } else if (key == 40) {/*向下按钮*/
18                 index++;
19                 if (index == 5) index = 1; //到底了
20             }
21             var li = search_show.find("li:eq(" + index + ")");
22 
23             li.css("background", "#E8F4FC").siblings().css("background", "");
24             type = li.attr("class");
25         });

主要代码就这些了。

最后来简单介绍下keydown里面的代码思路：

当用户按下键盘的时候，我首先要知道TA按了那个键，所以event.keyCode这句话则是获取当前用户按键值的属性。

就像上面注释写的一样，13则是回车键(Enter)的ASCII值，然后执行相应的方法。

search_show.show();这句的作用主要表现在，用户输入搜索关键字，然后又失去焦点，再按上下键事则将列表重新显示出来；这句也算是赠送的-_-!

这里的if else主要用户判断用户到底是按的上还是下键，然后将index加或减。

li.css("background", "#E8F4FC").siblings().css("background", "");这句代码是JQuery代码，也是我最喜欢的代码，它的作用是将当前li加上css背景色，而将同级下面的其他li的css背景色去掉。

当然你也可以用纯JS写。