原生js实现简单智能关键词搜索功能

现在很多网站都有智能搜索功能，它能根据用户的输入自动提示出需要补全的数据，方便用户的查询，下面我们用JavaScript来简单实现它。

html部分：

 <div id="box">
    <input type="text" name="" id="" placeholder="请输入搜索关键字，关键字之间用空额隔开">
    <ul id="searchList"></ul>
  </div>

css部分：

  <style>
    #box{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      padding-top: 100px;
    }
    ul,li{
      list-style: none;
      padding: 0;
      margin: 0;
    }
    input {
      width: 300px;
      padding-left: 10px;
    }
    li{
      width: 316px;
      border: 1px solid black;
    }
    li>span{
      color: red;
    }
  </style>

 js部分：

 <script>
   var content = [
      '不是这年没有味道了，而是现在过年时，最快乐的人不是你！',
      '既然有“劝酒”文化，可不可以同样“劝书”呢？',
      '我脱口而出：是我自己拿的，不是老爸让我拿去买烟的',
      '只是晚上睡眠不好，倒不是内疚，实在是爸妈房里太吵！',
      '开会时我有点不舒服，领导问我要不要紧？',
      '既然不幸福可以随时离，你还怕什么呢',
      '现在的年轻人，应该多向家里要钱，不然这些钱留在家人手里',
      '只要跟着鳄鱼一起翻转且速度够快的话，还可以把鳄鱼头给拧下来',
      '满口黄腔多心地善良，沉默君子定多加堤防！',
      '爱上你不是我的错，都是你胸大腰细惹的祸',
    ]
    var inp = document.querySelector('input');
    var showBox = document.getElementById('searchList');
    var box = document.getElementById('box');
    // 边输入边验证
    inp.oninput = () => {
      createNode();
    }
    // 获取关键词
    function getVal() {
      let inpVal = inp.value;
      let arrVal = [];
      //关键字去重
      arrVal = inpVal.trim().split(' ').filter(item => {
        return item && !arrVal.includes(item);
      })
      return arrVal;
    }
    // 根据搜索词创建节点
    function createNode() {
      //初始化ul列表
      showBox.innerHTML = '';
      let val = getVal();
      let newArr = [];
      // 判断input框是否为空
      if (val.length < 1) {
        return;
      }
      for (let i = 0; i < content.length; i++) {
        // 判断关键词是否都包含在数据里面
        let result = val.some(item => {//如果想要关键词都包含在数据中就使用every方法
          return content[i].includes(item);
        })
        if (result) {//都包含则向newArr添加
          let str = content[i];
          //关键词替换用于关键词颜色改变
          for (let j = 0; j < val.length; j++) {
            str = str.replaceAll(val[j], "<span>" + val[j] + "</span>");
          }
          newArr.push(str);
        }
      }
      //创建并渲染
      for (let i = 0; i < newArr.length; i++) {
        let li = document.createElement('li');
        li.innerHTML = newArr[i];
        searchList.appendChild(li);
      }
    }
    </script>