仿百度搜索下拉提示功能

前段时间一直想试下写个异步查询的功能来练习下ajax，于是，在一个小项目中，将一个文件的搜索功能做成像百度那个样子（当然，不可能做到好像百度一样强大），为此，也找了不少资料和别人的例子（不过没有一个让我完全满意的），于是，在参考别人的代码的基础上，自己写了一个，其基本原理是利用jQuery实现Ajax异步查询，后台则是利用模糊查询来获取结果，最后传给前台来显示，html网页代码（里面含有boostrap的样式）如下：

<form id="searchBar" action="${ctx}/File/getKeywordFile.html" method="post" class="form-inline" role="form">
            <div style="margin:0px auto; margin-bottom: 10px;max-width:1000px;">
                <div id="search">
                    <input type="text" name="keyword" id="keyword" class="input form-control" autocomplete="off" placeholder="请输入文件名">
                    <button type="submit" class="btn btn-default">搜索</button>
                </div>
                <div id="searchSuggest">
                    <ul>
                    </ul>
                </div>
            </div>
        </form>

下面三是jQuery异步查询的代码：

function autoCom() {
                var searchKey;
                var searchType;
                searchKey = $("form#searchBar input.input").val();
                //searchType = $("div#multipleselect a").attr("class");
                if (searchKey) {

                    $.get("/Management/File/search.html", {keyword: searchKey}, function(data, textStatus) {
                        var listLength;
                        var currentList = -1;
                        $("#searchSuggest ul").html(data);
                        listLength = $("#searchSuggest ul li").length;
                        if (listLength >= 1) {
                            $("#searchSuggest").show();
                        } else {
                            $("#searchSuggest").hide();
                        }

                        $("#searchSuggest ul li").hover(function() {
                            $("#searchSuggest ul li").removeClass();
                            $(this).addClass("lihover");
                            currentList = $("#searchSuggest ul li").index(this);
                        }, function() {
                            $(this).addClass("lihover");
                        }).click(function() {
                            var keywordContent;
                            keywordContent = $(this).text();
                            $("form#searchBar  input.input").val(keywordContent);
                            $("#searchSuggest").hide();
                            $("form#searchBar").submit();
                        }
                        );
                        $(document).keyup(function(event) {
                            event = event || window.event;
                            //监听上方向键
                            if (event.keyCode === 38) {
                                if (currentList < 1) {
                                    currentList = listLength - 1;
                                    $("#searchSuggest  ul li").css('background-color', ''); //先清除样式 避免冲突
                                    $("#searchSuggest  ul li").eq(currentList).css('background-color', '#EEF');
                                    var keywordContent = $("#searchSuggest ul li").eq(currentList).text();
                                    $("form#searchBar input.input").val(keywordContent);
                                } else {
                                    currentList--;
                                    $("#searchSuggest  ul li").css('background-color', '');
                                    $("#searchSuggest  ul li").eq(currentList).css('background-color', '#EEF');
                                    var keywordContent = $("#searchSuggest ul li").eq(currentList).text();
                                    $("form#searchBar input.input").val(keywordContent);
                                }
                            }
                            //监听下方向键
                            if (event.keyCode === 40) {
                                if (currentList < (listLength - 1)) {
                                    currentList++;
                                    $("#searchSuggest  ul li").css('background-color', '');
                                    $("#searchSuggest  ul li").eq(currentList).css('background-color', '#EEF');
                                    var keywordContent = $("#searchSuggest ul li").eq(currentList).text();
                                    $("form#searchBar input.input").val(keywordContent);
                                } else {
                                    currentList = 0;
                                    $("#searchSuggest  ul li").css('background-color', '');
                                    $("#searchSuggest  ul li").eq(currentList).css('background-color', '#EEF');
                                    var keywordContent = $("#searchSuggest ul li").eq(currentList).text();
                                    $("form#searchBar input.input").val(keywordContent);
                                }
                            }
                        }
                        );
                    });
                    $("body").click(function() {
                        $("#searchSuggest").hide();
                    });
                } else {
                    $("#searchSuggest").hide();
                }
            }
            $("form#searchBar input.input").keyup(function() {
                if ((event.keyCode !== 38) && (event.keyCode !== 40) && (event.keyCode !== 13)) {
                    autoCom();
                }
            });

下面是搜索框的CSS：

 #searchBar{
                margin-top:10%;
                text-align: center;
            }
            .lihover:hover{
                cursor: pointer;
                background: #eeF;
            }
            #id{
                display:inline;
                width:250px;
            }
            #keyword{
                width:250px;
            }
            ul{
                margin-left:346px;
                margin-top:-2px;
                border:1px solid #ccc;
                list-style:none;
                width:250px;
                padding:0px;
            }
            li{
                text-align: left;
                line-height:30px;
                font-size:14px;
                height: 30px;
                padding: 0px 6px;
            }
            .form-control{
                border-radius: 0px;
            }
            .my{
                margin-left:346px;
                margin-top:-2px;
                border:1px solid #ccc;
                list-style:none;
                width:250px;
                padding:0px;
            }

实现的效果如下：