模糊查詢實例

<div class="item_row company_name_wrap">
    <div class="item_name">擡頭名稱<i class="i_star">*</i> 
    </div>
    <div class="item_cont ">
        <input id='company_name' type="text" placeholder="請輸入單位名稱" class="ei_int">
    </div>
    <div class="campany_list ">
    </div>    
</div>  

.company_name_wrap{
    position: relative;
}
.company_name_wrap .campany_list{
    padding-left: 10rem;
    max-height: 13rem;
    overflow-y: auto;
    background: #fff;
    position: absolute;
    top: 4.5rem;
    left: 0;
    right: 0;
    z-index: 10000;
}
.company_name_wrap .campany_list .campany_list_son:first-child{
    margin-top: 0.8rem;
}
.company_name_wrap .campany_list  .campany_list_son{
    height: 2.2rem;
    font-size: 1.6rem;
    line-height: 2.2rem;
    margin-bottom: 0.8rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}
.company_name_wrap .campany_list  .campany_list_son span{
    color: #5A70C5;
}

// 點擊擡頭名稱
            var data=['愛又米科技威富通有限公司','阿里巴巴科技有限公司','xiaomianyang','小米科技有限公司','小羅布哈哈哈','車收到貨不多的','回家吳無害化幾塊錢 我和客戶狀況'];
            var newData=[];
            
            $('#company_name').on('focus',function(){
                updateData();
            })
            $('#company_name').on('blur',function(){
                
                setTimeout(function(){
                    $('.campany_list').html('');
                },100)
                
            })
            function updateData(){
                var value=$('#company_name').val();
                newData=[];
                data.map(function(item){
                    if(item.search(value) != -1){
                        newData.push(item)
                    }
                })
                newData.map(function(item){
                    var newValue;
                    if(value===''){
                        newValue=item;
                    }
                    else{
                        // 該方法匹配item中的重複出現的字段時會出錯，如用"12"去匹配'12733612838'，第二個12後面的就不會顯示，由於只取到了valueArry[1]
                        // var valueArry=item.split(value);
                        // item.replace(/value/g, '"<span>"+value+"</span>"')
                         //    newValue=valueArry[0]+"<span>"+value+"</span>"+valueArry[1];


                         // 這裏不作各個字的精確匹配,若是須要，請在newData賦值時間進行判斷
                        newValue = item.replace(new RegExp(value,'g'),"<span>"+value+"</span>");
                    }
                    $('.campany_list').append("<div class='campany_list_son'>"+newValue +"</div>");
                })
                
            }
            $('.campany_list').on('click',".campany_list_son",function(){
                // console.log($(this).val())
                $('#company_name').val($(this).text());
                $('.campany_list').html('');
            })


            $(document).on('input','#company_name',function (e) {
                if (e.type === "input" || e.orignalEvent.propertyName === "value") {
                  $('.campany_list').html('');
                    updateData();
                }
            })

參考：1.正則匹配變量：：：https://blog.csdn.net/yzbben/article/details/53467659

　　　2.jq實時監控輸入框變化：：：https://blog.csdn.net/weixin_37615202/article/details/72638326                      

$(document).on('input','#company_name',function (e) { } )