·说明：把代码直接粘到HTML文件用浏览器打开即可体验

body的数据

<input class="keyWord" type="text" placeholder="查询关键字"><button class="searchBtn">查询</button><div><ul class="resultContent"></ul></div>

javaScript

  // 模拟的数据let dataArr = [{name: "吃西瓜",addres: "河南",base: 1,},{name: "无所谓",addres: "浙江",base: 2,},{name: "小卡拉米",addres: "北京",base: 3,},{name: "张大胆",addres: "湖南",base: 4,},{name: "吴爽",addres: "河东狮子吼",base: 5,},{name: "吴宣仪",addres: "海南嘚",base: 6,}]// 逻辑如下：// 获取输入查询关键字的输入框let keyWordInput = document.querySelector(".keyWord")// 获取按钮let seaBtn = document.querySelector(".searchBtn")// 获取渲染结果的ullet resultUl = document.querySelector(".resultContent")let resArr = [] // 存放过滤结果// 使用indexof方法，实现模糊查询function searchFun(list, keyWord) {if (keyWord == '') {// 如果关键字为空，就删除所有的lifor (var i = resultUl.childNodes.length - 1; i >= 0; i--) { // 一定要倒序，正序是删不干净的，可自行尝试resultUl.removeChild(resultUl.childNodes[i])}} else {for (let i = 0; i < list.length; i++) {for (let sxm in list[i]) { // sxm：属性名；list[i]：list数组中的每个元素(数组的元素全是对象)if (String(list[i][sxm]).indexOf(keyWord) >= 0) { // list[i][sxm]：list数组中，第i个元素的sxm属性值，包含查询关键字的话，resArr.push(list[i])break}}}console.log('过滤后的结果=', resArr)// 将过滤后的结果渲染到页面上if (resArr.length != 0) {// 先删除所有的子节点(li)（即：删除前一次的查询记录）for (var i = resultUl.childNodes.length - 1; i >= 0; i--) { // 一定要倒序，正序是删不干净的，可自行尝试resultUl.removeChild(resultUl.childNodes[i])}// 将查询结果渲染到页面中for (let j = 0; j <= resArr.length; j++) {let li = document.createElement('li')let str = ''for (let key in resArr[j]) {str = str + '-' + resArr[j][key]li.innerText = strresultUl.appendChild(li)}}} else {console.log('没找到')// 没找到就删除所有lifor (var i = resultUl.childNodes.length - 1; i >= 0; i--) { // 一定要倒序，正序是删不干净的，可自行尝试resultUl.removeChild(resultUl.childNodes[i])}}}}// 给按钮添加点击事件// seaBtn.addEventListener('click', function () {//   resArr = [] // 查询之前先清空它，不然数组里面会有上次的查询结果//   searchFun(dataArr, keyWordInput.value)// })// 监听输入框，实时查询 ------不适用防抖的情况// keyWordInput.addEventListener('input', function () {//   resArr = [] // 查询之前先清空它，不然数组里面会有上次的查询结果//   searchFun(dataArr, keyWordInput.value)// })// 使用防抖的情况keyWordInput.addEventListener('input',// resArr = [] // 查询之前先清空它，不然数组里面会有上次的查询结果debounce(()=>{resArr = [],searchFun(dataArr, keyWordInput.value)}))// 防抖函数function debounce(fun, wait = 1000) { // 设置默认参数let timer = nullreturn function () {if (timer) {clearTimeout(timer)}let arg = argumentslet _this = thistimer = setTimeout(function () {fun.apply(_this, arg)}, wait)}}