百度搜索下拉框效果(键盘操作)只完成部分功能,仅供参考

<div class="aaa" style="width:50%; height:400px; border:1px solid red; text-align:center">
<input type="text" class="search" placeholder="请输入搜索信息" style="width:300px; height:35px; margin-top:10px; line-height:35px" />
<div style="width:300px; height:200px; border:1px solid red; margin:0 auto">
<ul class="searchUL">
<li>
11111111111111111 
</li>
<li>
22222222222222222 
</li>
<li>
33333333333333333 
</li>
<li>
44444444444444444 
</li>
<li>
55555555555555555 
</li>
</ul>
</div>
<h2 class="reslut" style="color:red">
</h2>
</div>

        <script src="../scripts/jquery-2.1.1.min.js"></script>

        <script type="text/javascript">
            $(function () {


                $(".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;

                    }


                }

            }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值