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

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

                    }

                }

            }