本文旨在提供一种使用 JavaScript 实现列表项逐字母过滤搜索功能的教程。通过监听输入框的keyup事件，动态地根据用户输入的内容筛选并展示匹配的列表项。本文将提供完整的代码示例和详细的解释，帮助开发者理解和应用该功能。
实现原理
实现逐字母过滤的核心在于监听输入框的 keyup 事件，并在事件处理函数中获取输入框的值。然后，遍历列表项，检查每个列表项的文本内容是否以输入框的值开头。如果是，则显示该列表项；否则，隐藏该列表项。
代码实现
以下是一个完整的代码示例，展示了如何实现逐字母过滤搜索功能：
HTML 结构:
LOVESTUdio多校园网络店铺
下载
主要更新介绍： 完美整合Discuz!论坛，实现一站式登陆、退出、注册； 同步所有会员资料； 新增购物车功能，商品购买更加方便、快捷； 新增部分快捷菜单，网站访问更加方便； 限制首页商品、店铺标题显示长度； 修正会员后台管理不能更改密码的错误； 完善商品显示页面所有功能链接； 修正后台标签管理部分错误； 修正前台学校列表不按后台顺序显示的错误； 修正搜索功能中学校名称过长导致显示紊乱的现象； 修正
<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>
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;
}JavaScript 代码:
function myFunction() {
var value = document.getElementById("myInput").value.toUpperCase();
var myUL = document.getElementById("myUL");
for (var elem of myUL.getElementsByTagName("li")) {
if (elem.innerText.toUpperCase().startsWith(value)) {
elem.style.display = "";
} else {
elem.style.display = "none";
}
}
}代码解释:
- 获取输入值: document.getElementById("myInput").value.toUpperCase() 获取输入框的值，并将其转换为大写，以便进行不区分大小写的比较。
- 获取列表: document.getElementById("myUL") 获取 ul 元素，即列表。
- 遍历列表项: myUL.getElementsByTagName("li") 获取所有的 li 元素（列表项）。 for...of 循环用于遍历这些列表项。
- 检查是否以输入值开头: elem.innerText.toUpperCase().startsWith(value) 获取当前列表项的文本内容，将其转换为大写，并使用 startsWith() 方法检查它是否以输入值开头。
- 显示/隐藏列表项: 如果列表项的文本内容以输入值开头，则设置 elem.style.display = "";，使其显示。否则，设置 elem.style.display = "none";，使其隐藏。
注意事项
- 性能优化: 对于大型列表，频繁的 DOM 操作可能会影响性能。可以考虑使用节流或防抖技术来限制 myFunction() 的执行频率。
-
用户体验: 可以添加一些额外的用户体验优化，例如：
- 在没有匹配项时显示提示信息。
- 使用 CSS 过渡效果使列表项的显示和隐藏更加平滑。
-
容错处理: 可以添加一些容错处理，例如：
- 检查输入框的值是否为空。
- 处理 startsWith() 方法可能出现的异常。
- startsWith()兼容性 startsWith() 方法在一些老版本的浏览器中可能不支持，可以考虑使用 indexOf() 方法进行兼容处理。
总结
通过本文的教程，您已经学会了如何使用 JavaScript 实现列表项的逐字母过滤搜索功能。该功能可以极大地提高用户在大型列表中查找特定项目的效率。在实际应用中，可以根据具体需求进行定制和优化，以获得更好的用户体验。虽然这个实现比较简单，但是对于复杂的搜索需求，建议考虑使用更高级的搜索算法，例如“模糊搜索算法”，以提供更智能和准确的搜索结果。
