利用正则匹配,实现了前端模糊,只接受一个数组 或者数组包对象的格式
<!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.443332712576\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.443332712576\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.4411519969 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.4411519969",
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.77018821011)",
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.77018821011",
},
{
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.4697008598 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.4697008598",
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.4268085657 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.4268085657",
latitude: "41.7754410772877",
},
{
attr_BuildingUse: "购物、餐饮、影剧院",
attr_AboveGroundFloors: "5",
attr_ItemName: "沈阳百联购物中心",
sys_type: "LARGE_COMMERICAL_COMPLEX",
sys_moid: "301c9edd8c9429178481bc5652ab00",
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>
