当前位置：首页 > news >正文

前端做模糊查询（含AI版）

news 2025/8/15 17:31:00

文章目录

前言
代码实现
- AI
- 个人
总结

前言

因为table需要编辑，所以如果从后端拿数据，编辑后筛选数据就会丢失。这时候就需要前端一次性拿到所有数据进行过滤，数据进行浅拷贝，以便过滤后的数据修改之后，同步修改总数居，保存的时候直接保存所有数据。
个人写的版本不算是完整递归，就想搞个递归版本，就用AI写了一个（https://code.fittentech.com/try）这个可以直接内嵌vscode，但他写的我运行不起来，做了些修改才能正常运行，突然就感觉ai暂时还替代不了我呀，哈哈哈

代码实现

AI

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>前端模糊查询示例</title><style>ul {list-style-type: none;padding: 0;}li {padding: 8px;background-color: #f9f9f9;margin-bottom: 2px;}li.match {background-color: #e7f3fe;}</style>
</head>
<body><input type="text" id="searchInput1" placeholder="请输入查询内容..."><input type="text" id="searchInput2" placeholder="请输入查询内容..."><ul id="searchList"><li>苹果 - 红色</li><li>香蕉 - 黄色</li><li>橙子 - 橙色</li><li>葡萄 - 紫色</li><li>西瓜 - 绿色</li></ul>// 这里是我加的，不然只能搜索一次<ul id="searchList1" style='display:none'><li>苹果 - 红色</li><li>香蕉 - 黄色</li><li>橙子 - 橙色</li><li>葡萄 - 紫色</li><li>西瓜 - 绿色</li></ul><script>document.getElementById('searchInput1').addEventListener('blur', function() {updateResults();});document.getElementById('searchInput2').addEventListener('blur', function() {updateResults();});function updateResults() {const query1 = document.getElementById('searchInput1').value.toLowerCase();const query2 = document.getElementById('searchInput2').value.toLowerCase();const allItems = Array.from(document.getElementById('searchList1').getElementsByTagName('li'));const list = document.getElementById('searchList');list.innerHTML = ''; // 清空原有列表内容recursiveFilter(allItems, [query1, query2], function(filteredItems) {/**我把清除列表写在这里的，因为recursiveFilter里的callback会被重复调用const list = document.getElementById('searchList');list.innerHTML = ''; // 清空原有列表内容*/filteredItems.forEach(item => {const li = document.createElement('li');li.textContent = item.textContent;li.classList.add('match');list.appendChild(li);});// 这个返回也是我加的，因为不加返回的话，recursiveFilter方法里的return之后拿不到数据艾，filteredRest会为undefined// return filteredItems;});}function recursiveFilter(items, queries, callback) {if (items.length === 0) {return callback([]);}const [first, ...rest] = items;const filteredRest = recursiveFilter(rest, queries, callback);if (queries.some(query => query && first.textContent.toLowerCase().includes(query))) {// return callback([first, ...filteredRest]);return [first, ...filteredRest];} else {// return callback(filteredRest);return filteredRest;}}</script>
</body>
</html>

个人

	tempArrFun(table, obj) {// 如果没有查询该条件则返回所有，因为searchObj会有page之类的分页参数if (!this.searchObj[obj]) {return table;}return table.filter(item => {if (item[obj]) {if (item[obj].includes(this.searchObj[obj])) return true;return false;}// 是否取空值return false;});},handleSearch(obj) {this.allSearchTable = [];this.searchObj = Obj;let tempArr = [];this.searchInfo.forEach((obj, index) => {if (index === 0) {tempArr = this.tempArrFun(this.allTableData, obj.CODE);} else {tempArr = this.tempArrFun(tempArr, obj.CODE);}if (index === this.searchInfo.length - 1) {this.allSearchTable = tempArr;}});}