论坛数据统计           欢迎到【弱电论坛】来学习和讨论问题!

★电工电气产品供求、电气展会、人才、电气技术文章、图库、电气技术论坛等相关内容,请跳转至【电气之家网】--- 可直接使用本站会员名和密码登陆!(首次使用需要激活账户)
标王 热搜: 网络监控  弱电  楼宇对讲  机房及机柜内部的理线方法  CAD  门禁  ar800-hn  综合布线  工资  面板 
 
 
当前位置: 首页 » 技术 » 电脑技术 » 网页网站 » 正文

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

放大字体  缩小字体 发布日期:2013-01-21  浏览次数:454
 
 

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

 
 
 
[ 技术搜索 ]  [ 加入收藏 ]  [ 告诉好友 ]  [ 打印本文 ]  [ 关闭窗口 ]

 
0条 [查看全部]  相关评论

 
点击排行
 
 
 
弱电基础 | 常用软件 | 信息发布规则 | 积分规则 | VIP会员注册 | 广告投放 | 弱电培训 | 联系我们 | 版权声明 | 帮助中心 | 网站地图 | 排名推广 | 京ICP备11008917号-3 | RSS订阅
★本站手机app客户端已上线! 点击下载