JavaScript实现列表逐字过滤：从模糊到精确的搜索框优化

在现代web应用中，实时搜索和过滤功能是提升用户体验的关键组成部分。当用户需要从大量数据中快速定位特定信息时，一个响应迅速且逻辑准确的搜索框显得尤为重要。本文将聚焦于一种常见的需求：实现一个列表的逐字过滤功能，即随着用户在搜索框中键入字符，列表项能够根据输入的前缀进行精确匹配和筛选。

1. 问题背景与传统方法的局限性

我们通常会遇到这样的场景：有一个无序列表（如国家名称列表），用户希望通过在搜索框中输入“M”来显示所有以“M”开头的国家，输入“Mo”则只显示以“Mo”开头的国家，以此类推，直到列表缩小到唯一选项或符合条件的选项。

最初，开发者可能会采用String.prototype.indexOf()方法来实现过滤。例如，以下是一个基于indexOf的常见实现：

function myFunction() {
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.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; // 获取列表项的文本内容
    if (txtValue.toUpperCase().indexOf(filter) > -1) { // 检查文本是否包含过滤器字符串
      li[i].style.display = ""; // 显示匹配项
    } else {
      li[i].style.display = "none"; // 隐藏不匹配项
    }
  }
}

尽管indexOf()能够查找字符串中是否包含某个子串，但它并不能满足“逐字前缀匹配”的需求。例如，如果列表中有“Louisiana”和“Montana”，当用户输入“a”时，indexOf('a')会同时匹配到“Louisiana”和“Montana”（因为它们都包含字母'a'），而不是仅仅匹配以“a”开头的项。这会导致过滤结果不够精确，无法实现逐字缩小范围的效果。

2. 精确前缀匹配的解决方案：startsWith()

为了实现精确的逐字前缀匹配，我们需要确保列表项的文本内容是以用户输入的值开头的。String.prototype.startsWith()方法正是为此目的而设计的。它检查一个字符串是否以另一个字符串的字符开头，并返回true或false。

立即学习“Java免费学习笔记（深入）”；

以下是使用startsWith()方法优化后的JavaScript过滤函数：

花生AI

B站推出的AI视频创作工具

下载

function myFunction() {
    // 获取搜索框的当前值，并转换为大写，以便进行不区分大小写的匹配
    var value = document.getElementById("myInput").value.toUpperCase();
    var myUL = document.getElementById("myUL");

    // 遍历列表中的每一个列表项
    // 使用for...of循环遍历HTMLCollection更简洁
    for (var elem of myUL.getElementsByTagName("li")) {
        // 获取列表项的文本内容，并转换为大写
        // 注意：这里直接使用innerText，它包含了所有子元素的文本
        var itemText = elem.innerText.toUpperCase();

        // 检查列表项的文本是否以搜索框的值开头
        if (itemText.startsWith(value)) {
          elem.style.display = ""; // 如果是，则显示该列表项
        } else {
          elem.style.display = "none"; // 否则，隐藏该列表项
        }
    }
}

在这个改进版本中：

• document.getElementById("myInput").value.toUpperCase()：获取搜索框的当前输入值，并将其转换为大写，以确保搜索是不区分大小写的。
• elem.innerText.toUpperCase().startsWith(value)：这是核心逻辑。它获取当前列表项的可见文本（innerText），也转换为大写，然后使用startsWith()方法检查它是否以用户输入的值（value）开头。
• elem.style.display = "" 和 elem.style.display = "none"：根据匹配结果显示或隐藏列表项。

这种方法完美地解决了逐字前缀匹配的需求。当用户输入“M”时，只有以“M”开头的项会显示；输入“Mo”时，只有以“Mo”开头的项会显示，以此类推。

3. 完整的代码示例

为了提供一个可运行的示例，我们将结合HTML结构和CSS样式。

HTML结构 (index.html)

  
Louisiana
  
Maine
  
Massachusetts
  
Michigan
  
Mississippi
  
Missouri
  
Montana
  
New Hampshire
  
New Mexico
  
New York

CSS样式 (style.css)

* {
  box-sizing: border-box;
}

#myInput {
  /* 可以添加搜索图标，这里省略了背景图片 */
  /* background-image: url('/css/searchicon.png'); */ 
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none; /* 移除列表项的默认标记 */
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* 防止双重边框 */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none; /* 移除链接下划线 */
  font-size: 18px;
  color: black;
  display: block; /* 使整个链接区域可点击 */
}

#myUL li a:hover:not(.header) {
  background-color: #eee; /* 鼠标悬停时的背景色 */
}

JavaScript逻辑 (script.js)

function myFunction() {
    var value = document.getElementById("myInput").value.toUpperCase();
    var myUL = document.getElementById("myUL");
    for (var elem of myUL.getElementsByTagName("li")) {
        // 对于包含标签的
，需要获取标签的文本
        // 更好的做法是直接获取
的innerText，它包含了的文本
        var itemText = elem.innerText.toUpperCase(); 

        if (itemText.startsWith(value)) {
          elem.style.display = "";
        } else {
          elem.style.display = "none";
        }
    }
}

4. 注意事项与性能优化