模仿百度的下拉搜索，上下键控制并赋值

这两天做开发，接了个任务，就是和百度搜索输入信息回传数据列表一样可以用上下键控制，

这里分享下我的精简版的例子（本来有ajax回传的代码，这里就不讲了，需要注意的是因为我的ajax时间是由keyup事件触发的，有上下键控制的时候会触发ajax,所以需要在keyup事件函数里面屏蔽掉上下键）。

首先是jquery代码：

<script type="text/javascript">
    function moveSelect(step) {
         var listItems=$('#search_show li');
         //当前hover的步数
         var active;
         active =  $('.one').index();
         listItems.eq(active).removeClass("one");
         listItems.eq(active).css("color","#a8a8a8");
         active += step;
        if (active < 0) {
             active = listItems.size() - 1;
         } else if (active >= listItems.size()) {
             active = 0;
         }
         var activeItem = listItems.eq(active).addClass("one");
         listItems.eq(active).css("color","#fff");
         $("#search_text").val(listItems.eq(active).text());
     };
  $(function(){
  $("#search_text").keydown(function(event){  
     var keycode = (event.keyCode ? event.keyCode : event.which);  
   if(keycode == 38){  //up
      moveSelect(-1);
     }  
     else if (event.keyCode == 40){//down
      moveSelect(1);
  }
  }); 
$("#search_text").focus(function(){
$("#search_show").css("display","block");
});
$("#search_text").blur(function(){
$("#search_show").css("display","none");
});
$("#search_show li").hover(function(){
$(this).addClass("one");
$(this).siblings().removeClass("one");
$(this).siblings().css("color","#a8a8a8");
});
  });
  </script>

moveSelect这个函数参考了网上有人提供的例子，并结合自己的实际需求作了修改。

css样式：

 <style type="text/css">
.one{
background-color: #ff5a00;
color:#fff;
}
ul li{
list-style-type:none;
color:#a8a8a8;
}
  </style>

html代码：

<div class="search">  
<div style="padding-left:40px;">
<input id="search_text" class="search_text" type="text" /> 
</div>
<!--搜索弹出框 start-->  
<div id="search_show" style="width:212px;display:none;">  
<ul style="margin-left:0px;">
<li>请选择搜索范围</li>  
<li>包含xXx的广播</li>  
<li>包含xXx的人</li>  
<li>包含xXx的社团</li> 
<li>请选择搜索</li>  
<li>包含xXx的广</li>  
<li>包含xXx的人们</li>  
<li>包含xXx的</li> 
</ul>
</div>  
<!--搜索弹出框 end-->  
</div>