如何实现输入框搜索时实时显示数组中的部分匹配结果？

你的代码当前仅支持完全匹配，要实现根据共同字符（模糊匹配）显示结果，需要调整判断逻辑和处理流程，以下是修改方案：

修改后的完整代码 #

<input type="text" />
<div></div>

$(document).on("keyup", "input", function() {
  // 获取输入值并统一转小写，实现大小写不敏感搜索
  const inputVal = $(this).val().toLowerCase();
  const array = ["tide","taet","oks","mos"];
  // 用数组存储所有匹配项，方便后续使用
  let storage = [];
  const $resultContainer = $("div");

  // 先清空旧结果，避免重复渲染
  $resultContainer.empty();

  // 输入为空时直接返回，无需处理
  if (!inputVal) return;

  // 遍历数组，找出所有包含输入字符的项
  for (let x = 0; x < array.length; x++) {
    const currentItem = array[x].toLowerCase();
    // 判断当前项是否包含输入内容
    if (currentItem.includes(inputVal)) {
      storage.push(array[x]);
      $resultContainer.append(`<p>this is : ${array[x]}</p>`);
    }
  }

  // 这里可以使用storage数组中的匹配项做后续操作
});

关键修改说明 #

1. 模糊匹配逻辑：
   把原有的严格相等判断input.val() === array[x]，替换为includes()方法，只要数组元素包含输入的字符就判定为匹配；同时统一转小写，实现大小写不敏感搜索（比如输入"ti"或"TI"都能匹配"tide"）。

2. 结果容器处理：
   每次输入时先清空结果容器，避免旧结果残留；输入为空时直接返回，减少不必要的遍历。

3. 匹配项存储：
   改用数组存储所有匹配结果，而不是只存第一个匹配项，方便后续批量处理。

4. 事件优化：
   去掉keypress事件，仅保留keyup避免重复触发；如果需要进一步优化性能，可以添加防抖函数减少频繁触发：

   // 防抖函数：输入停止300ms后再执行搜索
   function debounce(func, delay = 300) {
     let timeoutId;
     return function(...args) {
       clearTimeout(timeoutId);
       timeoutId = setTimeout(() => func.apply(this, args), delay);
     };
   }
   
   // 使用防抖包装搜索逻辑
   $(document).on("keyup", "input", debounce(function() {
     // 此处放置上述搜索逻辑
   }));
   

内容的提问来源于stack exchange，提问作者eror programs