本文介绍如何通过 javascript 实现输入框中键入内容时，动态筛选并展示数组中包含该子串的所有匹配项，而非仅精确匹配完整单词。
本文介绍如何通过 javascript 实现输入框中键入内容时，动态筛选并展示数组中包含该子串的所有匹配项，而非仅精确匹配完整单词。
在当前代码中，if (input.val() === array[x]) 仅在用户输入与数组元素完全一致时才触发显示，导致必须敲完整个单词（如 "tide"）才能看到结果。这不符合“相关结果”的搜索预期——我们希望支持子串匹配（substring matching），即输入 "ti" 也能匹配到 "tide" 和 "taet"（因二者均含 "ti"）。
✅ 正确做法：使用 includes() 进行模糊前缀/包含匹配
将严格相等判断改为子串包含判断，即可实现更自然的搜索体验：
$(document).on("input", "input", function () {
const input = $(this);
const array = ["tide", "taet", "oks", "mos"];
const query = input.val().trim();
$("div").empty(); // 每次清空旧结果，避免重复叠加
if (query === "") return; // 空输入不展示任何结果
let found = false;
for (let x = 0; x this is: ${array[x]}`);
found = true;
}
}
if (!found) {
$("div").append("<p>No matches found.</p>");
}
});
? 补充优化建议
- 使用 input 事件替代 keyup/keypress：input 事件能捕获所有输入变化（包括粘贴、删除、语音输入等），更健壮；
- 忽略大小写：通过 .toLowerCase() 统一转换，提升用户体验；
- 防空输入干扰：添加 trim() 和空值判断，避免误匹配空字符串；
- 性能提示：对于大型数组（>1000 项），建议引入防抖（debounce）或切换为更高效的算法（如 Trie 树），但本例中小数组无需过度优化。
⚠️ 注意事项
- includes() 是 ES6+ 方法，现代浏览器均支持；若需兼容 IE，可改用 indexOf() !== -1；
- 当前逻辑是“包含匹配”，若需“前缀匹配”（如只匹配以输入开头的项），可用 array[x].startsWith(query)；
- 避免在循环中频繁调用 $("div").append()，已优化为先清空再批量追加（虽本例量小，但属良好实践）。
通过以上改进，输入 "t" 将同时高亮 "tide" 和 "taet"；输入 "os" 则匹配 "mos" 和 "oks"——真正实现了“相关结果”的语义化搜索。
