JavaScript实现模糊搜索

qq_45422185

已于 2023-03-08 18:09:28 修改

阅读量317

点赞数

文章标签： javascript html 前端 Powered by 金山文档

于 2023-03-08 18:08:07 首次发布

本文链接：https://blog.csdn.net/qq_45422185/article/details/129408641

版权

利用正则匹配,实现了前端模糊,只接受一个数组或者数组包对象的格式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" id="ipt" />
    <button onclick="search()">搜索</button>
    <script>
      const data = [
        {
          attr_BuildingUse: "购物、餐饮、歌舞娱乐、影剧院",
          attr_AboveGroundFloors: "6",
          attr_ItemName: "一方广场",
          sys_type: "LARGE_COMMERICAL_COMPLEX",
          sys_moid: "f7d6c5fe0b774faf747c724a3a5f6a4a",
          sys_createDate: "2023-02-09 13:01:50.047",
          attr_BuitArea: "9.9",
          attr_Coordinate: "POINT(123.44333271642576\t 41.7763410252835)",
          sys_modifyDate: "2023-02-09 13:01:50.047",
          attr_Region: "210103",
          attr_UndergroundFloors: "1",
          attr_Address: "沈阳市沈河区文化路81号",
          attr_BuitHigh: "40.2",
          regionName: "沈河区",
          longitude: "123.44333271642576\t",
          latitude: "41.7763410252835",
        },
        {
          attr_BuildingUse: "购物、展览、餐饮、歌舞娱乐、其他",
          attr_AboveGroundFloors: "6",
          attr_ItemName: "华润中心万象城（沈阳）物业服务有限公司",
          sys_type: "LARGE_COMMERICAL_COMPLEX",
          sys_moid: "585f434f3326c77c2fc36dae76f14127",
          sys_createDate: "2023-02-09 13:01:39.525",
          attr_BuitArea: "25.0609",
          attr_Coordinate: "POINT(123.441151989969 41.7820887453631)",
          sys_modifyDate: "2023-02-09 13:01:39.525",
          attr_Region: "210103",
          attr_UndergroundFloors: "3",
          attr_Address: "和平区青年大街288号",
          attr_BuitHigh: "44",
          regionName: "沈河区",
          longitude: "123.441151989969",
          latitude: "41.7820887453631",
        },
        {
          attr_BuildingUse: "购物、餐饮",
          attr_AboveGroundFloors: "17",
          attr_ItemName: "沈阳七好国际鞋城股份有限公司",
          sys_type: "LARGE_COMMERICAL_COMPLEX",
          sys_moid: "34efd3810c83059b3da4a29293cdb98f",
          sys_createDate: "2023-02-09 13:01:47.973",
          attr_BuitArea: "9.3638",
          attr_Coordinate: "POINT(123.463252102126 41.7764018821011)",
          sys_modifyDate: "2023-02-09 13:01:47.973",
          attr_Region: "210103",
          attr_UndergroundFloors: "2",
          attr_Address: "沈阳市沈河区文化路157号",
          attr_BuitHigh: "73",
          regionName: "沈河区",
          longitude: "123.463252102126",
          latitude: "41.7764018821011",
        },
        {
          attr_BuildingUse: "购物、餐饮、影剧院",
          attr_AboveGroundFloors: "5",
          attr_ItemName: "沈阳中兴新一城商场经营管理有限公司",
          sys_type: "LARGE_COMMERICAL_COMPLEX",
          sys_moid: "30b42e2d0c786c0de3b5d3b3dae00cad",
          sys_createDate: "2023-02-09 13:01:43.799",
          attr_BuitArea: "27",
          attr_Coordinate: "POINT(123.469764008598 41.8096057591019)",
          sys_modifyDate: "2023-02-09 13:01:43.799",
          attr_Region: "210104",
          attr_UndergroundFloors: "3",
          attr_Address: "沈阳市沈河区中街路268号",
          attr_BuitHigh: "26",
          regionName: "大东区",
          longitude: "123.469764008598",
          latitude: "41.8096057591019",
        },
        {
          attr_BuildingUse: "购物、餐饮",
          attr_AboveGroundFloors: "18",
          attr_ItemName: "沈阳南塔鞋城有限责任公司",
          sys_type: "LARGE_COMMERICAL_COMPLEX",
          sys_moid: "0b7f87493416ffb6c0882a41a0b96b2f",
          sys_createDate: "2023-02-09 13:01:45.918",
          attr_BuitArea: "7.5",
          attr_Coordinate: "POINT(123.464268085657 41.7754410772877)",
          sys_modifyDate: "2023-02-09 13:01:45.918",
          attr_Region: "210103",
          attr_UndergroundFloors: "0",
          attr_Address: "沈阳市沈河区文化东路1号　",
          attr_BuitHigh: "18",
          regionName: "沈河区",
          longitude: "123.464268085657",
          latitude: "41.7754410772877",
        },
        {
          attr_BuildingUse: "购物、餐饮、影剧院",
          attr_AboveGroundFloors: "5",
          attr_ItemName: "沈阳百联购物中心",
          sys_type: "LARGE_COMMERICAL_COMPLEX",
          sys_moid: "301c9ed89d8c9429178481bc5652ab00",
          sys_createDate: "2023-02-09 13:01:41.712",
          attr_BuitArea: "11.631",
          attr_Coordinate: "POINT(123.465461035375 41.8022741388046)",
          sys_modifyDate: "2023-02-09 13:01:41.712",
          attr_Region: "210104",
          attr_UndergroundFloors: "2",
          attr_Address: "沈阳市沈河区青年大家55甲号",
          attr_BuitHigh: "25.5",
          regionName: "大东区",
          longitude: "123.465461035375",
          latitude: "41.8022741388046",
        },
      ];
      /**
       * list 是已有的数据，search 是需要模糊搜索的关键字
       */
      const fuzzySearch = (list, search) => {
        let data = [];
        if (list.length != 0 && search) {
          let str = `\S*${search}\S*`;
          let reg = new RegExp(str, "i"); //不区分大小写
          list.map((item) => {
            //item是一个对象,name循环这个对象的每一项进行模糊查询
            if (typeof item == "object") {
              for (const key in item) {
                if (reg.test(item[key])) {
                  data.push(item);
                }
              }
            } else {
              if (reg.test(item[key])) {
                data.push(item);
              }
            }
          });
        }
        return data;
      };
      // fuzzySearch() 这个函数的返回值就是查询后返回的数组
      const ipt = document.querySelector("#ipt");
      function search() {
        console.log(fuzzySearch(data, ipt.value));
      }
    </script>
  </body>
</html>