js 搜索框提示效果键盘上下移动选择-技术-弱电之家网手机版

js 搜索框提示效果键盘上下移动选择

日期:2013-01-21 14:19 点击:468

<!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>
<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>