实现列表项的逐字母过滤搜索功能-html教程-PHP中文网

实现列表项的逐字母过滤搜索功能

心靈之曲

发布： 2025-08-12 22:02:01

原创

160人浏览过

实现列表项的逐字母过滤搜索功能

本文旨在提供一种使用 JavaScript 实现列表项逐字母过滤搜索功能的教程。通过监听输入框的keyup事件，动态地根据用户输入的内容筛选并展示匹配的列表项。本文将提供完整的代码示例和详细的解释，帮助开发者理解和应用该功能。

实现原理

实现逐字母过滤的核心在于监听输入框的 keyup 事件，并在事件处理函数中获取输入框的值。然后，遍历列表项，检查每个列表项的文本内容是否以输入框的值开头。如果是，则显示该列表项；否则，隐藏该列表项。

代码实现

以下是一个完整的代码示例，展示了如何实现逐字母过滤搜索功能：

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>

登录后复制

CSS 样式 (可选):

微信小程序-康爱多商城

微信小程序－康爱多商城是一个微信小程序的商城demo源码。它实现了商城的首页功能。软件特色：自定义搜索框图标grid水平拖动列表线条中间显示文字

查看详情

* {
  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 实现列表项的逐字母过滤搜索功能。该功能可以极大地提高用户在大型列表中查找特定项目的效率。在实际应用中，可以根据具体需求进行定制和优化，以获得更好的用户体验。虽然这个实现比较简单，但是对于复杂的搜索需求，建议考虑使用更高级的搜索算法，例如“模糊搜索算法”，以提供更智能和准确的搜索结果。

以上就是实现列表项的逐字母过滤搜索功能的详细内容，更多请关注php中文网其它相关文章！