jq实现web端智能检索功能

前几天做了一个地图添加点，由于点数较多所以要一个智能检索功能，

具体代码如下

html

<div class=" BMap_noprint anchorTL" style="position: absolute; z-index: 10; 
text-size-adjust: none; bottom: auto; right: auto; top: 3px; left: 150px;">
<div class="gover_search">
<input type="text" class="input_search_key" id="gover_search_key" placeholder="请输入监测点名称关键词">
<button type="submit" class="search_btn">定位</button>
<div class="search_suggest" id="gov_search_suggest">
<ul style="height: 200px;overflow: auto;"></ul>
</div>
</div>
</div>

js调用keySearch函数 传入数组和所需查找的键名

//创建智能查询控件并创建监听事件
function keySearch(dataList, name) {
    // 定义一个控件类,即function
    function oSearchSuggest(searchFuc) {
        var input = $('#gover_search_key');
        var suggestWrap = $('#gov_search_suggest');
        var key = "";
        var init = function () {
            input.bind('keyup', sendKeyWord);
            input.bind('blur', function () {
                setTimeout(hideSuggest, 100);
            })
        };
        var hideSuggest = function () {
            suggestWrap.hide();
        };
        //发送请求，根据关键字到后台查询
        var sendKeyWord = function (event) {
            //键盘选择下拉项
            if (suggestWrap.css('display') == 'block' && event.keyCode == 38 || event.keyCode == 40) {
                var current = suggestWrap.find('li.hover');
                if (event.keyCode == 38) {
                    if (current.length > 0) {
                        var prevLi = current.removeClass('hover').prev();
                        if (prevLi.length > 0) {
                            prevLi.addClass('hover');
                            input.val(prevLi.html());
                        }
                    } else {
                        var last = suggestWrap.find('li:last');
                        last.addClass('hover');
                        input.val(last.html());
                    }
                } else if (event.keyCode == 40) {
                    if (current.length > 0) {
                        var nextLi = current.removeClass('hover').next();
                        if (nextLi.length > 0) {
                            nextLi.addClass('hover');
                            input.val(nextLi.html());
                        }
                    } else {
                        var first = suggestWrap.find('li:first');
                        first.addClass('hover');
                        input.val(first.html());
                    }
                }
                //输入字符
            } else {
                var valText = $.trim(input.val());
                if (valText == '' || valText == key) {
                    return;
                }
                searchFuc(valText);
                key = valText;
            }
        }
        //请求返回后，执行数据展示
        this.dataDisplay = function (data) {
            if (data.length <= 0) {
                suggestWrap.hide();
                return;
            }
            //往搜索框下拉建议显示栏中添加条目并显示
            var li;
            var tmpFrag = document.createDocumentFragment();
            suggestWrap.find('ul').html('');
            for (var i = 0; i < data.length; i++) {
                li = document.createElement('LI');
                li.innerHTML = data[i];
                tmpFrag.appendChild(li);
            }
            suggestWrap.find('ul').append(tmpFrag);
            suggestWrap.show();

            //为下拉选项绑定鼠标事件
            suggestWrap.find('li').hover(function () {
                suggestWrap.find('li').removeClass('hover');
                $(this).addClass('hover');

            }, function () {
                $(this).removeClass('hover');
            }).bind('click', function () {
                input.val(this.innerHTML);
                suggestWrap.hide();
            });
        }
        init();
    };
//实例化输入提示的JS,参数为进行查询操作时要调用的函数名
    var searchSuggest = new oSearchSuggest(sendKeyWordToBack);
//根据查询的DataList赋值进行筛选
//参数为一个字符串，是搜索输入框中当前的内容
    function sendKeyWordToBack(keyword) {
        console.log(1111111);
        console.log(dataList);

        var obj = {
            "keyword": keyword
        };
        var aData = [];
        for (var i = 0; i < dataList['sitesList'].length; i++) {
            var reg = new RegExp(keyword, "");
            if (reg.test(dataList['sitesList'][i][name]) == true) {
                aData.push(dataList['sitesList'][i][name]);
            }
        }
        searchSuggest.dataDisplay(aData);
    }
}

css 

@charset "utf-8";  
/* CSS Document */  
  
body, ul, li {
    margin: 0;
    padding: 0;
}
body{
    color:#666666;
    background:#FFFFFF;
}


  
.gover_search{ position:relative; z-index:99; height:26px; padding:15px 0 0 20px;   border-bottom:0;  }
.gover_search_form{height:36px;}  
.gover_search .search_t{ float:left; width:112px; line-height:26px; color:#666666;}  
.gover_search .input_search_key{ float:left; width:200px;   padding:3px; margin-right:5px; border:1px solid #cccccc; line-height:18px; background:#FFFFFF;}
.gover_search .search_btn{ float:left; width:68px; height:26px; overflow:hidden; border:1px solid #cccccc; text-align:center; color:#ff3300; letter-spacing:5px;  cursor:pointer; font-weight:bold;}
.gover_search .search_suggest{ position:absolute; z-index:999;   top:42px; width:205px;   display:none; }
.gover_search .search_suggest li{height:24px; overflow:hidden; padding-left:3px; line-height:24px; background:#FFFFFF; cursor:default;}  
.gover_search .search_suggest li.hover{background:#DDDDDD;}