这两天做开发,接了个任务,就是和百度搜索输入信息回传数据列表一样可以用上下键控制,
这里分享下我的精简版的例子(本来有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>