像这样如何使用键盘上下键使光标切换到下拉列表,并上下切换下拉列表????
栗子:
看代码吧
上下键切换下拉值
<script type="text/javascript" src="jquery.2.js"></script>
<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(){
console.log('列表出来')
$("#search_show").css("display","block");
});
$("#search_text").blur(function(){
console.log('列表关闭')
$("#search_show").css("display","none");
});
// 当鼠标滑过时
$("#search_show li").hover(function(){
$(this).addClass("one");
$(this).siblings().removeClass("one");
$(this).siblings().css("color","#a8a8a8");
// 鼠标划过时,搜索框显示其值
var listItems=$('#search_show li');
var active;
active = $('.one').index();
$("#search_text").val(listItems.eq(active).text());
});
});
</script>