前端做模糊查询（含AI版）_前端模糊查询-优快云博客

本文链接：https://blog.youkuaiyun.com/xixi_csdn/article/details/145148332

文章目录

前言
代码实现
- 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;
          }
        });
      }