本文介绍如何改进基础搜索逻辑，使输入框能实时显示包含用户输入字符的数组元素，而非仅在完全匹配时才显示结果。通过使用字符串包含判断替代全等匹配，可显著提升搜索的相关性和用户体验。
本文介绍如何改进基础搜索逻辑，使输入框能实时显示包含用户输入字符的数组元素，而非仅在完全匹配时才显示结果。通过使用字符串包含判断替代全等匹配，可显著提升搜索的相关性和用户体验。
在当前代码中，搜索逻辑依赖于严格全等比较 input.val() === array[x]，这意味着只有当用户完整输入如 "tide" 时，才会触发匹配并显示结果。这种“精确匹配”模式无法支持常见的“模糊前缀/子串搜索”，例如输入 "ti" 时理应匹配 "tide" 和 "taet"（因二者均含 "ti"），但原逻辑会直接跳过。
要实现真正的相关性搜索，关键在于将匹配逻辑从“完全相等”升级为“子串包含”。JavaScript 的 String.prototype.includes() 方法正是为此而生：它能高效判断目标字符串是否出现在数组元素中。
以下是优化后的完整实现（含防空、防重复、大小写不敏感等健壮性处理）：
<input type="text" placeholder="Search..."><div id="results"></div>
$(document).on("input", "input", function () {
const inputVal = $(this).val().trim();
const array = ["tide", "taet", "oks", "mos"];
const $results = $("#results");
// 清空结果（避免残留）
$results.empty();
// 空输入时直接返回，不展示任何结果
if (!inputVal) return;
// 遍历数组，查找所有包含输入内容的项（忽略大小写）
const matches = array.filter(item =>
item.toLowerCase().includes(inputVal.toLowerCase())
);
// 渲染匹配结果
if (matches.length > 0) {
matches.forEach(match => {
$results.append(`<p class="result-item">✓ ${match}</p>`);
});
} else {
$results.append('<p class="no-result"><em>No matches found.</em></p>');
}
});
✅ 关键改进点说明：
- 使用
input事件替代keyup keypress，兼容粘贴、语音输入等场景； - 添加
.trim()和空值校验，防止空白符干扰； - 采用
toLowerCase()实现大小写不敏感匹配，提升实用性； - 使用
filter()+includes()替代手动循环与if/else嵌套，逻辑更清晰、可维护性更强； - 结果容器使用唯一 ID（
#results）替代泛用div，避免误操作其他同级<div>。<p>⚠️ <strong>注意事项：</strong> </p> <ul> <li> <code>includes()在 IE 中不被支持（需 Polyfill 或改用indexOf() !== -1）； - 若数组极大（>1000 项），建议添加防抖（debounce）避免高频重绘；
- 如需更高级匹配（如拼音搜索、权重排序、高亮关键词），应引入专用库如 Fuse.js。
通过这一改动，搜索行为即从“全词匹配”跃升为“智能子串匹配”，真正满足用户对“相关结果”的直观期待。
