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

先看效果图

 

下面来看代码：

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

 

    <div class="search">
           <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>
        <!--搜索弹出框 start-->
         <div class="search_boder_z" id="search_show">
            <li class="title">&nbsp;&nbsp;&nbsp;请选择搜索范围</li>
            <li style="background:#E8F4FC;" class="microblog"><span>包含<cite>xXx</cite>的广播</span></li>
            <li class="account" style=""><span>包含<cite>xXx</cite>的人</span></li>
            <li class="group"><span>包含<cite>xXx</cite>的社团</span></li>
         </div>
         <!--搜索弹出框 end-->
    </div>

 

接下来是JS代码

var index = 1;//当前li
var search_show = $(".search");
var type  = 'microblog';//当前搜索类型

$("#search_text").keydown(function (event) {//上下键获取焦点
            var key = event.keyCode;
            if (key == 13) Search(); /*回车搜索*/

            if ($.trim($(this).val()).length == 0)
                return;

            search_show.show();

            if (key == 38) { /*向上按钮*/
                index--;
                if (index == 0) index = 4; //到顶了，
            } else if (key == 40) {/*向下按钮*/
                index++;
                if (index == 5) index = 1; //到底了
            }
            var li = search_show.find("li:eq(" + index + ")");

            li.css("background", "#E8F4FC").siblings().css("background", "");
            type = li.attr("class");
        });

主要代码就这些了。

最后来简单介绍下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写。