如何使用JavaScript实现随用户输入响应的筛选列表

没问题，我来帮你搞定这个随输入动态筛选列表的需求！核心思路就是监听搜索框的输入变化，逐个检查列表项的文本是否以输入内容开头（不区分大小写），匹配的显示，不匹配的隐藏。下面给你两种实现方案，原生JavaScript和jQuery的都有，你可以根据自己的项目情况选择：

原生JavaScript实现 #

这种方案不需要依赖任何外部库，直接用浏览器原生API就能完成：

<input type="search" class="search" name="search">
<ul class="find">
  <li>Bird</li>
  <li>Cabbage</li>
  <li>Cat</li>
  <li>Dog</li>
  <li>Eagle</li>
  <li>Egg</li>
  <li>Frog</li>
  <li>Fist</li>
</ul>

<script>
// 获取DOM元素
const searchInput = document.querySelector('.search');
const listItems = document.querySelectorAll('.find li');

// 监听搜索框的输入事件，实时响应内容变化
searchInput.addEventListener('input', function() {
  // 把输入值转成小写并去除首尾空格，统一匹配规则
  const searchTerm = this.value.trim().toLowerCase();
  
  // 遍历所有列表项，逐个判断是否匹配
  listItems.forEach(item => {
    const itemText = item.textContent.toLowerCase();
    
    // 搜索框为空时显示所有项，否则只显示以搜索词开头的项
    if (searchTerm === '' || itemText.startsWith(searchTerm)) {
      item.style.display = 'block';
    } else {
      item.style.display = 'none';
    }
  });
});
</script>

关键细节说明： #

• input事件会在用户输入、删除内容时实时触发，保证筛选的即时性
• toLowerCase()统一转成小写，彻底解决大小写不敏感的问题
• startsWith()方法专门用来检查文本是否以指定字符串开头，完美契合你的首字母（或前缀）筛选需求
• 当搜索框清空时，自动恢复显示所有列表项

jQuery实现 #

如果你的项目已经引入了jQuery，用这个方案会更简洁：

<input type="search" class="search" name="search">
<ul class="find">
  <li>Bird</li>
  <li>Cabbage</li>
  <li>Cat</li>
  <li>Dog</li>
  <li>Eagle</li>
  <li>Egg</li>
  <li>Frog</li>
  <li>Fist</li>
</ul>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('.search').on('input', function() {
  const searchTerm = $(this).val().trim().toLowerCase();
  
  $('.find li').each(function() {
    const itemText = $(this).text().toLowerCase();
    // 用jQuery的show/hide方法简化显示隐藏操作
    if (searchTerm === '' || itemText.startsWith(searchTerm)) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
});
</script>

关键细节说明： #

• jQuery的on('input')和原生的addEventListener('input')作用完全一致
• $(this).val()和$(this).text()简化了DOM值的获取操作
• show()和hide()方法直接封装了样式控制，代码更简洁

两种方案都能完美满足你的需求：不管输入大写还是小写字母，都会正确筛选出以该字母开头的列表项，而且输入过程中会实时更新显示结果。

内容的提问来源于stack exchange，提问作者Aldrin Atolle