今天為大家分享js實(shí)現(xiàn)模糊查詢的功能！
（如果解決了您的問題，請(qǐng)幫忙給我點(diǎn)個(gè)贊吧，謝謝?。。。?/p>
話不多說直接上代碼：（復(fù)制即可）
css部分：
<style>
? ? .wrap{width:50%;margin:0 auto;}
? ? #searchShow{font-size:12px;border:1px solid #ccc; margin-top:20px;}
? ? #searchShow li{border:1px solid #ccc;padding:4px 5px;}
? ? #searchShow li:nth-child(even) {?
? ? ? ? background: hsl(180, 35%, 58%);?
? ? ? ? color: #fff;
? ? }?
? ? #searchShow li:nth-child(odd) {?
? ? ? ? background: White;?
? ? }
? </style>
js部分：（需要引入jq庫）
<script>
let listData = ["上海市","黃浦區(qū)","盧灣區(qū)","徐匯區(qū)","長(zhǎng)寧區(qū)","靜安區(qū)","普陀區(qū)",
? "閘北區(qū)","楊浦區(qū)","虹口區(qū)","閔行區(qū)","寶山區(qū)","嘉定區(qū)","浦東新區(qū)",
? "金山區(qū)","松江區(qū)","青浦區(qū)","南匯區(qū)","奉賢區(qū)","崇明縣",];
renderTab(listData);//渲染表格
//鍵入觸發(fā)事件
$('#searchKey').bind('input propertychange', function() {
//進(jìn)行相關(guān)操作
? ? var searchResult = fuzzySearch();
? ? renderTab(searchResult);
});
//點(diǎn)擊查詢按鈕觸發(fā)事件
? $('#searchBtn').click(function(){
? ? ? var searchResult = fuzzySearch();
? ? ? renderTab(searchResult);
? });
// 正則表達(dá)式實(shí)現(xiàn)模糊查詢
function fuzzySearch(){
? var keyWord = $('#searchKey').val();
? var len = listData.length;
? var arr = [];
? var reg = new RegExp(keyWord);
? for(var i=0;i<len;i++){
? ? ? //如果字符串中不包含目標(biāo)字符會(huì)返回-1
? ? ? if(listData[i].match(reg)){
? ? ? ? ? arr.push(listData[i]);
? ? ? }
? }
? return arr;
}
//渲染表格
function renderTab(list){
? if(list.length==0){
? ? $('#searchShow').html('未查詢到關(guān)鍵字相關(guān)結(jié)果');
? ? return;
? }
? var colStr = '';
? for(var i=0,len=list.length;i<len;i++){
? ? colStr+="<li>"+list[i]+"</li>";
? }
? $('#searchShow').html(colStr);
}
</script>
html部分：
<div class="wrap" id="wrap">
? ? ? <input type='text' value="" id='searchKey'/>
? ? ? <input type='button' value="查詢" id='searchBtn'/>
? ? ? <ul id='searchShow'></ul>
? </div>
