如何实现搜索框逐字母输入时按前缀匹配实时过滤列表选项

原有代码的问题在于使用indexOf()做任意位置包含匹配，不符合前缀匹配要求；之前找到的首字母匹配逻辑仅校验第一位字符，输入第二位后逻辑失效导致列表全隐藏。

核心修改逻辑 #

只需要调整匹配判断规则即可，CSS和HTML结构无需改动：

• 统一将输入内容、列表项文本转为大写，实现大小写不敏感匹配
• 对输入内容做首尾去空处理，避免误输入空格导致匹配异常
• 匹配时判断列表项文本是否以输入内容为开头，输入长度为n时仅校验前n位字符，实现逐位输入逐次过滤的效果
• 输入框为空时默认展示全部列表项

修改后完整JS代码 #

直接替换原有的myFunction函数即可：

function myFunction() {
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById("myInput");
  // 取输入值，去空格后统一转大写
  filter = input.value.trim().toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = (a.textContent || a.innerText).toUpperCase();
    // 前缀匹配判断：输入为空时展示全部，否则校验开头是否匹配
    if (!filter || txtValue.startsWith(filter)) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

如果需要兼容IE11及更老旧的不支持startsWith方法的浏览器，可以把判断条件替换为txtValue.slice(0, filter.length) === filter，实现效果完全一致。

匹配效果验证 #

• 输入单字符M：所有首字母为M的选项（Maine、Massachusetts、Michigan、Mississippi、Missouri、Montana）保留，Louisiana、New Hampshire等非M开头的选项隐藏
• 输入Mo：仅前缀为Mo的Montana保留
• 输入Ma：前缀为Ma的Maine、Massachusetts保留，继续输入第三位字符即可收敛到单个匹配结果，完全符合逐位过滤的需求

原有CSS、HTML代码不需要做任何调整，替换JS后即可直接使用。

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