本文讲解如何修改现有代码，使搜索框在用户输入过程中实时显示数组中包含输入字符的匹配项，而非仅当完整单词输入完毕后才显示结果。
本文讲解如何修改现有代码，使搜索框在用户输入过程中实时显示数组中包含输入字符的匹配项，而非仅当完整单词输入完毕后才显示结果。
默认情况下，原代码使用严格相等（===）判断输入值是否与数组某项完全一致，因此只有当用户完整输入如 "tide" 后才会触发匹配，无法实现“输入 t 就显示 tide、taet”这类模糊/包含式搜索。
要实现相关性实时匹配，关键在于将匹配逻辑从「全等匹配」改为「子字符串包含匹配」。即：检查数组每一项是否包含当前输入内容（不区分大小写更佳），而非要求完全相等。
以下是优化后的完整示例代码（含防空、去重、大小写不敏感处理）：
$(document).on("input", "input", function () {
const input = $(this);
const searchTerm = input.val().trim();
const array = ["tide", "taet", "oks", "mos"];
// 清空结果区域
$("div").empty();
// 输入为空时直接返回
if (!searchTerm) return;
// 过滤出包含搜索词的项（忽略大小写）
const matches = array.filter(item =>
item.toLowerCase().includes(searchTerm.toLowerCase())
);
// 渲染匹配结果
if (matches.length > 0) {
matches.forEach(match => {
$("div").append(`<p>this is: ${match}</p>`);
});
} else {
$("div").append("<p>No matches found.</p>");
}
});
✅ 关键改进点说明：
- 使用
input事件替代keyup keypress，兼容剪贴、自动填充等场景； - 用
String.prototype.includes()判断子串存在性，支持部分匹配（如输入"t"→ 匹配"tide"和"taet"）； - 添加
.toLowerCase()实现大小写不敏感搜索； -
trim()防止空格干扰； - 空输入时提前退出，避免无意义渲染；
- 显示“无匹配”提示，提升用户体验。
⚠️ 注意事项：
- 当前为简单包含匹配，若需更高阶的相关性（如前缀优先、相似度排序、拼音匹配），建议引入
fuse.js或string-similarity等专用库； - 大量数据时应考虑防抖（debounce），避免高频重绘影响性能；
- 生产环境建议将
array抽离为常量或通过 API 获取，避免硬编码。
通过以上调整，搜索行为将真正具备“相关性”——用户每输入一个字符，页面即动态更新最贴近的候选结果，显著提升交互体验与实用性。
