模糊查询实例

<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) { } )