jquery实现搜索提示效果

1.想要实现的效果如下：其实与百度地图的城市切换部分是一样的。

代码如下：其中的知识点包括（$.inArray(test,array)>0   判断test是否在数组array中）（$("#input").keyup(function(){}) 当向input中输入内容时的监听事件）

（val.indexOf(test)!=-1 如果test包含在val中）

    function searchBtn() {
            var customhouseName = $.trim($(".cityChoice .search input").val());
           // $(".searchResult").html(" ");
            if (customhouseName == "")
            { alert("请输入海关的名称");}
            else { 
                if ($.inArray(customhouseName, arry)>0) {   //如果input中的内容在数组中，
                    $(".cityChoice div").eq(0).find("span").html(customhouseName);
                    $(".city").children("button").html(customhouseName);
                    $(".searchResult").addClass("hide");
                }
                else {                                    
                    $(".searchResult").addClass("hide");
                    alert("请输入正确的名称");
                }
            }
        }
        $(function () {
            //input框输入内容时
            $(".cityChoice .search input").keyup(function () {
                $(".searchResult").html("");
                var customHouse = $.trim($(this).val().toString());
                if (customHouse != "") {
                    $.each(arry, function (index, val) {
                        //如果输入的内容包括在数据中，就将其加入ul li中
                        if (val.indexOf(customHouse) != -1) {
                            $(".searchResult").append("<li>" + val + "</li>");
                        }
                        //如果ul中有子元素，则ul显示出来
                        if ($(".searchResult").html()!="") {
                            $(".searchResult").removeClass("hide");
                        }
                    })
                }
                //点击ul li中的数据，将其写入input中并清空ul中数据，隐藏ul。
                $(".searchResult li").click(function () {
                    $(".cityChoice .search input").val($(this).html());
                    $(this).parent().html();
                    $(".searchResult").addClass("hide");
                })
                return false;
            })
           
        })
        

前端代码：

 <div class="search">
          <span></span>&emsp;&emsp;<input type="text" placeholder="" /><button onclick="searchBtn()">搜索</button>
          <ul class="searchResult hide"></ul>
 </div>

       .cityChoice .search input{height:24px;130px;margin-right:5px;border:1px solid #eee;}
       .cityChoice .search input:focus{border-color:#bbb;}
       .cityChoice .search button{padding:3px 5px; height:26px;}
       .cityChoice .search button:hover{background-color:#eee;}
       .cityChoice .search .searchResult{left: 89px; 131px;position: absolute; background-color: #fff;
           border: 1px solid #bbb; overflow: hidden; padding: 3px 5px;box-sizing: border-box;max-height:280px;overflow-y:auto;}
       .cityChoice .search .searchResult li{padding:3px 0;}
       .cityChoice .search .searchResult li:hover{cursor:pointer;}