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