1. 程式人生 > >百度搜索下拉框效果(鍵盤操作)只完成部分功能,僅供參考

百度搜索下拉框效果(鍵盤操作)只完成部分功能,僅供參考

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

                    }


                }

            }