<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>js 搜索框提示效果 键盘上下移动选择</title>
<style>
</style>
</head>
<body onkeydown="javascript:onkeydownpage(event)">
<input type=text id="lei_input" name = "lei_input"/>
<div id="lei_div" style="width:auto;height:auto;position:absolute;background-color:white;border:1px solid gray;">
<li>1</li>
<li>12</li>
<li>123</li>
<li>1234</li>
<li>12345</li>
<li>a</li>
<li>bb</li>
<li>cccc</li>
<li>ddddddd</li>
<li>eeeeeeeeeeeeeeeeeeee</li>
</div>
<div id = "test">
</div>
<script>
var select_status = 0;
var li_bg = "#e2eaff";
var input_id = "lei_input";
var div_id = "lei_div";
$(div_id).style.display="none";
$(input_id).onfocus = function()
{
$(div_id).style.display="";
}
$(input_id).onblur = function()
{
$(div_id).style.display="none";
}
function onkeydownpage(evt)
{
if($(div_id))
{
var evt = evt ? evt : (window.event ? window.event : null);
var l = $(div_id).childNodes.length;
if (document.all){
var kcode=evt.keyCode;
}
else{
var kcode=evt.which;
}
if(kcode == 40)
{
if(select_status == 1)
{
for(var i=0; i<l; i++)
{
if($(div_id).childNodes[i].style.backgroundColor == li_bg){
var x = parseInt((i+1)%l);
$(div_id).childNodes[i].style.backgroundColor = "";
$(div_id).childNodes[x].style.backgroundColor = li_bg;
break;
}
}
}else{
$(div_id).childNodes[0].style.backgroundColor = li_bg;
select_status = 1;
}
}
if(kcode == 38)
{
if(select_status == 1)
{
for(var i=0; i<l; i++)
{
if($(div_id).childNodes[i].style.backgroundColor == li_bg){
var x = parseInt((i-1)%l);
if(i == 0 ) x = parseInt(l-1);
$(div_id).childNodes[i].style.backgroundColor = "";
$(div_id).childNodes[x].style.backgroundColor = li_bg;
break;
}
}
}else{
$(div_id).childNodes[0].style.backgroundColor = li_bg;
select_status = 1;
}
}
}
}
function $(v){return document.getElementById(v);}
/**
(()function()
{}
)();
*/
</script>
</body>
</html>