使用 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免费学习笔记（深入）”；

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";
}
}
}

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

1. 获取输入值： document.getElementById(“myInput”).value 获取输入框中的文本，并使用 toUpperCase() 方法将其转换为大写，以便进行不区分大小写的比较。
2. 获取列表： document.getElementById(“myUL”) 获取列表元素。
3. 循环遍历列表项： 使用 for 循环遍历列表中的每个 li 元素。
4. 获取列表项文本： listItems[i].innerText 获取当前列表项的文本内容，并使用 toUpperCase() 方法将其转换为大写。
5. 检查是否以输入值开头： listItemText.startsWith(value) 检查列表项的文本是否以输入框中的文本开头。startsWith() 方法用于判断字符串是否以指定的前缀开始。
6. 显示或隐藏列表项： 如果列表项的文本以输入值开头，则将其 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 的调用频率。
• 用户体验： 可以添加一些额外的用户体验改进，例如：
  • 在没有匹配项时显示一条消息。
  • 高亮显示匹配的文本。
• 模糊搜索： 如果需要实现更复杂的模糊搜索功能，可以考虑使用正则表达式或其他模糊匹配算法。

总结

本文介绍了如何使用 JavaScript 实现一个简单的字母递进式列表过滤功能。通过监听输入框的 keyup 事件，并使用 startsWith() 方法检查列表项是否以输入值开头，我们可以实现一个交互式的过滤体验。记住，在实际应用中，要根据具体需求进行性能优化和用户体验改进。