如何修改HTML表格过滤代码以实现前缀匹配（仅匹配以输入字符开头的内容）

没问题，我来帮你调整这段代码，实现你要的前缀匹配效果！

原来的代码用indexOf()方法判断内容是否包含输入的关键词，这就是为什么输入"ab"会匹配所有包含"ab"的字符串。要改成只匹配以关键词开头的内容，只需要把判断逻辑从包含匹配换成前缀匹配就行，用JavaScript的startsWith()方法就可以轻松实现。

修改后的完整代码 #

function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      // 这里把indexOf判断换成startsWith前缀匹配
      if (txtValue.toUpperCase().startsWith(filter)) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}

关键修改点说明 #

我只改了一行代码：把原来的

if (txtValue.toUpperCase().indexOf(filter) > -1) {

替换成了

if (txtValue.toUpperCase().startsWith(filter)) {

• startsWith()方法会直接检查字符串是否以指定的前缀开头，完全符合你的需求；
• 保留了toUpperCase()转换，确保匹配是不区分大小写的（输入"AB"和"ab"效果一样）；
• 当输入为空时，startsWith("")会返回true，所有行都会显示，和原来的逻辑保持一致，不需要额外调整。

这样修改后，输入"ab"就只会显示那些第一列内容以"ab"（不区分大小写）开头的行啦，比如"abcd"、"abdc"会被匹配，而"babe"、"cfab"这些包含"ab"但不是开头的就会被隐藏。

备注：内容来源于stack exchange，提问作者M.Rono