js、jquery實現列表模糊搜索功能

時間 2019-11-19

標籤 jquery 實現列表模糊搜索功能欄目 JavaScript 简体版

原文原文鏈接

模糊搜索功能在工做中應用普遍，而且很實用，本身寫了一個方法，之後用到的時候能夠直接拿來用了！javascript

實現的搜索功能：

1. 能夠匹配輸入的字符串找出列表中匹配的項，列表框的高度跟隨搜索出的列表項的多少改變css

2. 能夠點擊某一項進行選中列表項html

3. 能夠按下上、下、回車鍵來控制列表項java

4. 按下回車鍵時則會選中列表項jquery

5. 點擊文本框中的下拉鍵頭時會切換下拉框的顯示/隱藏數組

6. 點擊文本框外部時自動隱藏下拉框ide

先來預覽一下效果吧！

列表中包含的列表項有：函數

北京、上海、杭州、安慶、大興安嶺、安陽、廣州、貴陽、哈爾濱、合肥、邯鄲、呼倫貝爾、淮南、黃山、濟南、濟寧、嘉興、南昌、南通、南寧、南京
在預覽時須要輸入匹配以上項目的文字，以便更好的預覽效果

點擊連接預覽模糊搜索功能this

http://sandbox.runjs.cn/show/kwxlptblurl

下面就開始實現功能啦！

1、首先，引入jquery文件

<script type="text/javascript" src="js/jquery/jquery-3.2.1.min.js"></script>

2、html部分

<div id="container">
    <h2>模糊搜索</h2>
    <div id="cityContainer" class="selectContainer">
        <label>城市：</label>
        <input type="text" placeholder="請輸入城市名稱" list="cityList" class="selectInput" name="cityName" id="cityName" value="" onfocus="fuzzySearch.call(this)" />
        <div class="picture_click dropDowns" style=""></div>
        <div id="cityList" class="selectList">
            <div id="001">北京</div>
            <div id="002">上海</div>
            <div id="003">杭州</div>
            <div id="004">安慶</div>
            <div id="005">大興安嶺</div>
            <div id="006">安陽</div>
            <div id="007">廣州</div>
            <div id="008">貴陽</div>
            <div id="009">哈爾濱</div>
            <div id="010">合肥</div>
            <div id="011">邯鄲</div>
            <div id="012">呼倫貝爾</div>
            <div id="013">淮南</div>
            <div id="014">黃山</div>
            <div id="015">濟南</div>
            <div id="016">濟寧</div>
            <div id="017">嘉興</div>
            <div id="018">南昌</div>
            <div id="019">南通</div>
            <div id="020">南寧</div>
            <div id="021">南京</div>
        </div>
    </div>
</div>

3、編寫樣式

<style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }
    h2 {
        margin-bottom: 20px;
    }
    #container {
        width: 500px;
        text-align: center;
        margin: 0 auto;
        font-family: "微軟雅黑";
        margin-top: 50px;
    }
    .selectContainer {
        position: relative;
    }
    .selectInput {
        width: 200px;
        height: 25px;
        border-style: none;
        border: 1px solid #999;
        border-radius: 3px;
        padding: 0 3px;
    }
    .picture_click {
        background: url(img/select-default.png) no-repeat; 
        opacity: 1; 
        width: 15px; 
        height: 8px;
        position: absolute;
        top: 10px;
        right: 125px;
    }
    .picture_click:hover {
        background-image: url(img/select-hover.png);
    }
    .selectList {
        width: 206px;
        height: 212px;
        overflow-y: scroll;
        text-align: left;
        margin: 0 172px;
        border: 1px solid #999;
        display: none;
        position: relative;
    }
    .selectList div {
        cursor: pointer;
    }
</style>

此時的頁面：

4、使用js、jquery實現模糊搜索功能

<script type="text/javascript">
    //初始化下拉框
    initSearchInput();

    function fuzzySearch(e) {
        var that = this;
        //獲取列表的ID
        var listId = $(this).attr("list");
        //列表
        var list = $('#' + listId + ' div');
        //列表項數組  包列表項的id、內容、元素
        var listArr = [];
        //遍歷列表，將列表信息存入listArr中
        $.each(list, function(index, item){
            var obj = {'eleId': item.getAttribute('id'), 'eleName': item.innerHTML, 'ele': item};
            listArr.push(obj);
        })
        
        //current用來記錄當前元素的索引值
        var current = 0;
        //showList爲列表中和所輸入的字符串匹配的項
        var showList = [];
        //爲文本框綁定鍵盤引發事件
        $(this).keyup(function(e){
            //若是輸入空格自動刪除
            this.value=this.value.replace(' ','');
            //列表框顯示
            $('#' + listId).show();
            if(e.keyCode == 38) {
                //up
                console.log('up');
                current --;
                if(current <= 0) {
                    current = 0;
                }
                console.log(current);
            }else if(e.keyCode == 40) {
                //down
                console.log('down');
                current ++;
                if(current >= showList.length) {
                    current = showList.length -1;
                }
                console.log(current);

            }else if(e.keyCode == 13) {
                //enter
                console.log('enter');
                //若是按下回車，將此列表項的內容填充到文本框中
                $(that).val(showList[current].innerHTML);
                //下拉框隱藏
                $('#' + listId).hide();
            }else {
                //other
                console.log('other');
                //文本框中輸入的字符串
                var searchVal = $(that).val();
                showList = [];
                //將和所輸入的字符串匹配的項存入showList
                //將匹配項顯示，不匹配項隱藏
                $.each(listArr, function(index, item){
                    if(item.eleName.indexOf(searchVal) != -1) {
                        item.ele.style.display = "block";
                        showList.push(item.ele);
                    }else {
                        item.ele.style.display = 'none';
                    }
                })
                console.log(showList);
                current = 0;
            }
            //設置當前項的背景色及位置
            $.each(showList, function(index, item){
                if(index == current) {
                    item.style.background = "#eee";
                    $('#' + listId).scrollTop(item.offsetTop);
                }else {
                    item.style.background = "";
                }
            })
            //設置下拉框的高度
            //212爲列表框的最大高度
            if(212 > $('#' + listId + ' div').eq(0).height() * showList.length) {
                $('#' + listId).height($('#' + listId + ' div').eq(0).height() * showList.length);
            }else {
                $('#' + listId).height(212);
            }
        })
    }

    function initSearchInput() {
        //給下拉箭頭綁定點擊事件  點擊下拉箭頭顯示/隱藏對應的列表
        //輸入框的類名爲selectInput
        //下拉箭頭的類名爲picture_click、dropDowns
        //下拉列表的類名爲selectList
        for(var i = 0; i < $('.picture_click').length; i++) {
             $('.picture_click').eq(i).click(function(){
                 $(this).parent().find('.selectList').toggle();
             })
        }
        //爲列表中的每一項綁定鼠標通過事件
        $('.selectList div').mouseenter(function(){
            $(this).css("background", "#eee").siblings().css("background", "");
        });
        //爲列表中的每一項綁定單擊事件
        $('.selectList div').click(function(){
            //文本框爲選中項的值
            $(this).parent().parent().find('.selectInput').val($(this).html());
            //下拉框隱藏
            $(this).parent().hide();
        });        

        //點擊下拉框外部的時候使下拉框隱藏
        var dropDowns = document.getElementsByClassName('dropDowns');
        var selectList = document.getElementsByClassName('selectList');
        document.body.onclick = function(e){
            e = e || window.event;
            var target = e.target || e.srcElement;
            for(var i = 0; i < dropDowns.length; i++) {
                if(target != dropDowns[i] && target != selectList[i]){
                    selectList[i].style.display = 'none';
                }
            }
        }
    }

</script>