本文介绍如何利用原生 javascript（无需第三方库）基于用户输入的关键词，从预定义课程列表中实时筛选出包含该关键词的建议项，支持大小写不敏感匹配与基础模糊搜索。
在构建搜索建议、自动补全或课程/产品筛选功能时，常需根据用户输入的片段（如 "hn" 或 "manag"）快速匹配相关条目。以下是一个轻量、高效且完全基于 Vanilla JS 的实现方案。
✅ 基础实现：filter() + includes()
const suggestions = [
"Degree Foundation",
"Business HND With Marketing Management",
"Business HND With Human Resource Management",
"Business HND With Business Analytics",
"Australian Degree Year 1 Diploma",
"BA (Hons) International Business and Finance",
"BA Global Business (Top-Up)",
"BSc (Hons) Business Management with International Business",
"BSc (Hons) Business Management with Marketing Management",
"BSc (Hons) Business Management with Human Resource Management",
"MBA International Business",
"MBA (General)",
"MBA in Human Resources Management",
"MBA with Business Analytics",
"MSC Strategic Marketing",
"CIMA"
];
function findSuggestionsContaining(searchTerm) {
if (!searchTerm || typeof searchTerm !== 'string') return [];
const normalizedTerm = searchTerm.trim().toLowerCase();
return suggestions.filter(item =>
item.toLowerCase().includes(normalizedTerm)
);
}
// 示例调用
console.log(findSuggestionsContaining("hn"));
// → ["Business HND With Marketing Management", ...]
console.log(findSuggestionsContaining("manag"));
// → ["Business HND With Marketing Management", ...]⚠️ 注意事项与优化建议
- 大小写不敏感：通过统一转为小写比对，避免 "Manag" 无法匹配 "Management"；
- 空值防护：函数开头校验 searchTerm 是否为有效字符串，防止 undefined 或空格导致意外行为；
- 性能考量：该方案时间复杂度为 O(n × m)（n 为数组长度，m 为平均字符串长度），适用于数百条以内的建议数据；若需支持千级+条目或高阶模糊匹配（如拼写容错、词干提取），建议引入 Fuse.js 或后端检索；
- 前端防抖推荐：在实际输入框事件中，应结合 debounce 避免高频触发（例如用户连续输入 "management" 时只在停顿 300ms 后执行一次筛选）：
function debounce(fn, delay) {
let timeoutId;
return (...args) => {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => fn(...args), delay);
};
}
const debouncedSearch = debounce((input) => {
const results = findSuggestionsContaining(input);
renderSuggestions(results); // 自定义渲染逻辑
}, 300);
// 绑定到 input 事件
document.getElementById('search-input').addEventListener('input', e => {
debouncedSearch(e.target.value);
});✅ 总结
该方案简洁可靠，零依赖、易集成，完美适配课程目录、标签筛选、配置项搜索等常见场景。只要确保关键词是子串关系（而非分词或语义匹配），String.prototype.includes() 就是最直接、可读性最强的选择。如需进一步增强体验，可叠加高亮匹配文本、排序权重（如首字母匹配优先）、或限制返回数量（如 slice(0, 5)），均能在同一范式下轻松扩展。
