JS实现前端模糊搜索功能_javascript技巧-js教程-PHP中文网

JS实现前端模糊搜索功能_javascript技巧

夢幻星辰

发布： 2025-10-30 23:49:01

原创

366人浏览过

模糊搜索可通过JavaScript实现，核心是按序匹配字符。使用fuzzyMatch函数判断关键词在字符串中是否顺序出现，结合input事件实时过滤数据，并通过防抖、高亮、拼音支持和缓存优化性能与体验。

js实现前端模糊搜索功能_javascript技巧

模糊搜索是前端开发中常见的需求，尤其在用户输入关键词时，需要实时匹配出相关结果。使用 JavaScript 实现一个轻量、高效的模糊搜索功能并不复杂，关键在于理解“模糊匹配”的逻辑并合理优化性能。

什么是模糊搜索

不同于精确查找，模糊搜索允许用户输入的部分字符按顺序出现在目标字符串中即可匹配，不要求连续或完全一致。例如，输入 "jso" 可以匹配到 "JavaScript"，因为 j、s、o 按顺序存在。

核心匹配算法实现

编写一个简单的模糊匹配函数，判断搜索词是否能按序匹配目标字符串：

function fuzzyMatch(str, keyword) { const lowerStr = str.toLowerCase(); const lowerKeyword = keyword.toLowerCase(); let index = 0; for (let char of lowerStr) { if (char === lowerKeyword[index]) { index++; } if (index === lowerKeyword.length) break; } return index === lowerKeyword.length; }

这个函数遍历目标字符串，依次检查 keyword 中的字符是否按顺序出现。只要全部命中，就返回 true。

立即学习“Java免费学习笔记（深入）”；

纳米搜索

纳米搜索：360推出的新一代AI搜索引擎

查看详情

在输入框中实时搜索

结合 input 事件，对数据列表进行过滤：

const data = ['JavaScript', 'Java', 'TypeScript', 'Vue.js', 'React', 'Node.js']; const input = document.getElementById('searchInput'); const resultList = document.getElementById('resultList'); input.addEventListener('input', (e) => { const keyword = e.target.value.trim(); if (!keyword) { resultList.innerHTML = ''; return; } const filtered = data.filter(item => fuzzyMatch(item, keyword)); resultList.innerHTML = filtered .map(item => `

${item}

`) .join(''); });

每次输入变化时，重新过滤数据并更新结果列表，实现即时反馈。