使用 JavaScript 实现列表项的字母递进式过滤-html教程-PHP中文网

使用 JavaScript 实现列表项的字母递进式过滤

花韻仙語

发布： 2025-08-12 22:24:29

原创

660人浏览过

使用 javascript 实现列表项的字母递进式过滤

本文将详细介绍如何使用 JavaScript 实现一个列表过滤功能，该功能可以根据用户在搜索框中逐个输入的字母，实时地过滤列表项，只显示以输入字母顺序开头的条目。我们将提供代码示例，并解释其工作原理，帮助你理解和应用这种交互式过滤技术。

逐步实现字母递进式过滤

要实现根据用户输入逐步过滤列表的功能，我们需要监听输入框的 keyup 事件，并在事件处理函数中获取用户输入的文本，然后根据该文本过滤列表项。

HTML 结构

首先，我们需要一个包含输入框和列表的 HTML 结构：

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<ul id="myUL">
  <li><a href="#">Louisiana</a></li>
  <li><a href="#">Maine</a></li>
  <li><a href="#">Massachusetts</a></li>
  <li><a href="#">Michigan</a></li>
  <li><a href="#">Mississippi</a></li>
  <li><a href="#">Missouri</a></li>
  <li><a href="#">Montana</a></li>
  <li><a href="#">New Hampshire</a></li>
</ul>

登录后复制

这里，myInput 是输入框的 ID，myUL 是列表的 ID。onkeyup="myFunction()" 表示每次在输入框中释放一个键时，都会调用 myFunction 函数。

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

Symanto Text Insights

基于心理语言学分析的数据分析和用户洞察

查看详情

JavaScript 代码

接下来，我们需要编写 JavaScript 代码来实现过滤逻辑：

function myFunction() {
  var value = document.getElementById("myInput").value.toUpperCase();
  var myUL = document.getElementById("myUL");
  var listItems = myUL.getElementsByTagName("li");

  for (var i = 0; i < listItems.length; i++) {
    var listItemText = listItems[i].innerText.toUpperCase();

    if (listItemText.startsWith(value)) {
      listItems[i].style.display = "";
    } else {
      listItems[i].style.display = "none";
    }
  }
}

登录后复制

这段代码的工作原理如下：

获取输入值： document.getElementById("myInput").value 获取输入框中的文本，并使用 toUpperCase() 方法将其转换为大写，以便进行不区分大小写的比较。
获取列表： document.getElementById("myUL") 获取列表元素。
循环遍历列表项： 使用 for 循环遍历列表中的每个 li 元素。
获取列表项文本： listItems[i].innerText 获取当前列表项的文本内容，并使用 toUpperCase() 方法将其转换为大写。
检查是否以输入值开头： listItemText.startsWith(value) 检查列表项的文本是否以输入框中的文本开头。startsWith() 方法用于判断字符串是否以指定的前缀开始。
显示或隐藏列表项： 如果列表项的文本以输入值开头，则将其 display 样式设置为 ""（即显示）；否则，将其 display 样式设置为 "none"（即隐藏）。

CSS 样式（可选）

为了使列表看起来更美观，可以添加一些 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;
  /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}

登录后复制

注意事项和优化

性能优化： 对于大型列表，频繁地操作 DOM 可能会影响性能。可以考虑使用节流（throttling）或防抖（debouncing）技术来限制 myFunction 的调用频率。
用户体验： 可以添加一些额外的用户体验改进，例如：
- 在没有匹配项时显示一条消息。
- 高亮显示匹配的文本。
模糊搜索： 如果需要实现更复杂的模糊搜索功能，可以考虑使用正则表达式或其他模糊匹配算法。