jq對數據實現模糊查找

1html部分

 <div class="fui-cell must ">
                    <div class="fui-cell-label">開戶行分行</div>
                    <div class="fui-cell-info">
                        <input type="text" class="fui-input data-item enquiries-input" name="bank_branch" id="bank_branch" placeholder="請填開戶行分行(在彈出的列表中選擇)" value="{$reg['bank_branch']}"/>
                        <!-- 模糊查詢-->
                    </div>
                </div>
                <ul class="enquiries-ul"></ul>

 

2.js部分

//模糊查詢
    $(function(){
　　　　　　input框聚焦時顯示選擇列表
        $('#bank_branch').focus(function(){
            showselet($(this).val())
        });
　　　　　　input失去焦點時隱藏選擇列表
        $('#bank_branch').blur(function(){
            $('.enquiries-ul')[0].style.display = 'none';
        });
　　　　//監聽input的輸入改變
        $("#bank_branch").on('input propertychange',function(){
            showselet($(this).val())
        });
    });
    //向後臺請求數據
    function showselet(e){
        let cs = e
        let data = {}
        if($("#bank_code").isEmpty()){
            FoxUI.toast.show('請填寫所屬銀行!');
            return
        }else {
            data.bank_code = $("#bank_code").val()
        };
        if($("#bank_province").isEmpty()){
            FoxUI.toast.show('請填寫開戶行省份!');
            return
        }else {
            data.bank_province = $("#bank_province").val()
        };
        if($("#bank_city").isEmpty()){
            FoxUI.toast.show('請填寫開戶行城市!');
            return
        }else {
            data.bank_city = $("#bank_city").val()
        };
        $.ajax({
            method:'POST',
            url:"你的請求地址",
            dataType: "json",
            data:data,
            success:function (e){
                if(e.status==1){
                    $('.enquiries-ul')[0].style.display = 'block';
                    renderingzh(e.result.data,cs);
                }else {
                    FoxUI.toast.show(e.result.message);
                }
            }

        })
    }
    //    解析列表並渲染：前端js模板渲染方式
    function renderingzh(dataList,cs) {
        var html = dataList;
        let arrayLists = '';
        for (let item=0;item<html.length;item++){
            // console.log(html[item])
             arrayLists +=
                `
                <li class="enquiries-li">${html[item].bank_branch}</li>

                `
        };
        $(".enquiries-ul")[0].innerHTML = arrayLists;
        //過濾數據並顯示，根據搜索框的數據進行模糊匹配，將匹配上的顯示出來，匹配不上的隱藏掉
　　　　方式一：

        /*$(".enquiries-ul li").hide();
        $(".enquiries-ul li").filter(":contains('" + cs + "')").show();*/
　　　　方式二：

        $(".enquiries-ul li")
            .hide()
            .filter(":contains('" + (cs) + "')")
            .show();
        $(".enquiries-li").click(function () {
            var val = $(this).text();
            $(".enquiries-input").val(val);
        })
    };