javaScript 使用indexOf 撸一下模糊查询

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

body的数据

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

1
2
3
4
5
6
7

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")

  // 获取渲染结果的ul
  let resultUl = document.querySelector(".resultContent")

  let resArr = [] // 存放过滤结果

  // 使用indexof方法，实现模糊查询
  function searchFun(list, keyWord) {
    if (keyWord == '') {
      // 如果关键字为空，就删除所有的li
      for (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 = str
            resultUl.appendChild(li)
          }
        }
      } else {
        console.log('没找到')
        // 没找到就删除所有li
        for (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 = null
    return function () {
      if (timer) {
        clearTimeout(timer)
      }
      let arg = arguments
      let _this = this
      timer = setTimeout(function () {
        fun.apply(_this, arg)
      }, wait)
    }
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124