js实现模糊查询纯前端

今天为大家分享js实现模糊查询的功能！

（如果解决了您的问题，请帮忙给我点个赞吧，谢谢！！！）

话不多说直接上代码：（复制即可）

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 = ["上海市","黄浦区","卢湾区","徐汇区","长宁区","静安区","普陀区",

  "闸北区","杨浦区","虹口区","闵行区","宝山区","嘉定区","浦东新区",

  "金山区","松江区","青浦区","南汇区","奉贤区","崇明县",];

renderTab(listData);//渲染表格

//键入触发事件

$('#searchKey').bind('input propertychange', function() {

//进行相关操作

    var searchResult = fuzzySearch();

    renderTab(searchResult);

});

//点击查询按钮触发事件

  $('#searchBtn').click(function(){

      var searchResult = fuzzySearch();

      renderTab(searchResult);

  });

// 正则表达式实现模糊查询

function fuzzySearch(){

  var keyWord = $('#searchKey').val();

  var len = listData.length;

  var arr = [];

  var reg = new RegExp(keyWord);

  for(var i=0;i<len;i++){

      //如果字符串中不包含目标字符会返回-1

      if(listData[i].match(reg)){

          arr.push(listData[i]);

      }

  }

  return arr;

}

//渲染表格

function renderTab(list){

  if(list.length==0){

    $('#searchShow').html('未查询到关键字相关结果');

    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>