百度搜索下拉框效果(鍵盤操作)只完成部分功能,僅供參考
$(".search").focus(function () {
$(".reslut").html("移入游標");
getKey();
});
$(".search").blur(function () {
$(".reslut").html("移出游標");
});
});
function getKey() {
document.onkeydown = function (event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
//if (e && e.keyCode == 27) { // 按 Esc
// //要做的事情
// alert(1111);
//}
//if (e && e.keyCode == 113) { // 按 F2
// //要做的事情
//}
//if (e && e.keyCode == 13) { // enter 鍵
// //要做的事情
//}
//if (e && e.keyCode == 116) { // f5 鍵
// //要做的事情
// return false;
//}
$(".reslut").html("你按下的鍵是:" + e.key + ",鍵碼是:" + e.keyCode);
var index = $(".add2").index();
console.log("索引" + index);
var count = $(".searchUL li").length - 1;
if (e && e.keyCode == 38) { //ArrowUp 鍵 向上
//要做的事情
$(".searchUL li").removeClass("add2");
index--;
if (index < 0) {
index = count;
}
$(".searchUL li").eq(index).addClass("add2");
console.log("索引向上" + index);
return false;
}
if (e && e.keyCode == 40) { // ArrowDown 鍵 向下
//要做的事情
$(".searchUL li").removeClass("add2");
index++;
if (index > count) {
index = 0;
}
$(".searchUL li").eq(index).addClass("add2");
console.log("索引向下" + index);
return false;
}
if (e && e.keyCode == 13) { // enter 鍵
var a = $(".add2").html();
console.log(a);
$(".search").val(a);
return false;
}
}
}