js实现模糊搜索

<style>
      input {
        width: 30%;
        margin-left: 35%;
        margin-top: 50px;
      }
      .title {
        margin-left: 15%;
        margin-top: 20px;
        width: 70%;
        display: flex;
      }
      .name {
        margin-top: 15px;
        width: 33%;
        text-align: center;
      }
      .contents {
        width: 70%;
        margin-left: 15%;
        margin-top: 10px;
      }
      .content {
        width: 100%;
        display: flex;
      }
    </style>

<input type="text" class="input" oninput="search()" />
    <div class="title">
      <div class="name">姓名</div>
      <div class="name">身份</div>
      <div class="name" onclick="boss()">战力</div>
    </div>
    <div class="contents">
      <div class="content">
        
      </div>

<script>
      let data; // 声明变量用于存储从服务器获取的 JSON 数据
      let input = document.getElementsByClassName('input')[0];
      let xhr = new XMLHttpRequest(); // 创建 XMLHttpRequest 对象
      xhr.open('get', 'js/new_file.json', true); // 使用 GET 方法请求指定路径的
      xhr.send(); // 发送请求
      xhr.onreadystatechange = function() {
        // 绑定 onreadystatechange 事件处理函数，处理响应状态变化
        if (xhr.readyState == 4 && xhr.status == 200) {
          let text = xhr.responseText;
          // 获取响应文本
          data = JSON.parse(text);
          // 将响应文本解析为 JSON 对象
          for (let i = 0; i < data.length; i++)
            // 遍历数据数组，根据身份属性进行转换
            if (data[i].identity == 1) {
              data[i].identity = '三教修士';
            } else if (data[i].identity == 2) {
            data[i].identity = '武夫';
          } else if (data[i].identity == 3) {
            data[i].identity = '剑修';
          };
          //给数据付给相应的身份值
          renderer(data); // 调用渲染函数，传入处理后的数据
        };
      };
      let contents = document.getElementsByClassName('contents')[0];
      function renderer(data) {
        let str = '';
        
        for (let i = 0; i < data.length; i++) {
          str +=
            `<div class="content"><div class="name">${data[i].name}</div><div class="name">${data[i].identity}</div><div class="name">${data[i].popularity}</div></div>`
        }
        contents.innerHTML = str;
      }
      let i = false;
      function boss() {
        //点击函数
        if (i == false) {
          // 如果 i 为 false，按受欢迎度从小到大排序
          data.sort(function(a, b) {
            return a.popularity - b.popularity;
          })
        } else if (i == true) {
          // 如果 i 为 true，按受欢迎度从大到小排序
          data.sort(function(a, b) {
            return b.popularity - a.popularity;
          })
        };
        i = !i;
        //给变量重新赋值
        renderer(data);
        //调用渲染函数
      };
      
      function search() {
        let value = input.value;
        //声明变量把input的值付给这个变量
        let arr = [];
        //声明变量把input的值付给这个变量
        for (let i = 0; i < data.length; i++) {
          //遍历data
          if (data[i].name.indexOf(value) >= 0) {
          //当data中的name中包含input的值时，把这个数据放到新建的数组中
            arr.push(data[i]);
          }
          renderer(arr);
          //调用渲染函数把新数组传参过去
        }
      }
    </script>