如何用原生JavaScript实现动态搜索过滤及无结果提示

动态搜索过滤功能可以让用户通过输入关键词快速定位目标内容，当没有匹配结果时展示无结果提示，能大幅提升页面的易用性。下面我们一步步实现这个功能。

基础HTML结构搭建

首先需要搭建包含搜索输入框、内容列表、无结果提示区域的HTML结构，代码如下：

<div class="search-container">
  <input type="text" id="searchInput" placeholder="请输入搜索关键词">
  <ul id="contentList">
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
    <li>葡萄</li>
    <li>西瓜</li>
    <li>草莓</li>
  </ul>
  <div id="noResultTip" class="no-result" style="display: none;">
    没有找到匹配的结果
  </div>
</div>

基础样式设计

为了让页面更美观，我们添加一些基础CSS样式，代码如下：

.search-container {
  width: 400px;
  margin: 20px auto;
  font-family: Arial, sans-serif;
}
#searchInput {
  width: 100%;
  padding: 8px 12px;
  box-sizing: border-box;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
#contentList {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #eee;
  border-radius: 4px;
}
#contentList li {
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
}
#contentList li:last-child {
  border-bottom: none;
}
.no-result {
  padding: 20px;
  text-align: center;
  color: #999;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-top: 10px;
}

核心JavaScript逻辑实现

接下来编写原生JavaScript代码，实现输入时实时过滤列表、无结果时展示提示的功能，核心逻辑如下：

获取DOM元素

首先获取搜索输入框、内容列表、无结果提示三个核心DOM元素：

// 获取搜索输入框
const searchInput = document.getElementById('searchInput');
// 获取内容列表容器
const contentList = document.getElementById('contentList');
// 获取无结果提示元素
const noResultTip = document.getElementById('noResultTip');
// 获取所有列表项
const listItems = contentList.getElementsByTagName('li');

绑定输入事件

给搜索输入框绑定input事件，当用户输入内容时触发过滤逻辑：

// 绑定输入事件
searchInput.addEventListener('input', function() {
  // 获取输入的关键词，转为小写，去除前后空格
  const keyword = this.value.trim().toLowerCase();
  // 记录匹配到的列表项数量
  let matchCount = 0;
  // 遍历所有列表项
  for (let i = 0; i < listItems.length; i++) {
    const item = listItems[i];
    // 获取列表项文本内容，转为小写
    const itemText = item.textContent.toLowerCase();
    // 判断文本内容是否包含关键词
    if (itemText.includes(keyword)) {
      // 包含关键词，显示该列表项
      item.style.display = 'block';
      matchCount++;
    } else {
      // 不包含关键词，隐藏该列表项
      item.style.display = 'none';
    }
  }
  // 根据匹配数量控制无结果提示的显示
  if (matchCount === 0 && keyword !== '') {
    // 没有匹配结果且关键词不为空，显示提示
    noResultTip.style.display = 'block';
    contentList.style.display = 'none';
  } else {
    // 有匹配结果或者关键词为空，隐藏提示
    noResultTip.style.display = 'none';
    contentList.style.display = 'block';
  }
});

边界情况处理

在实际使用中还需要处理一些边界情况，提升功能的健壮性：

• 当搜索框清空时，需要显示所有列表项，隐藏无结果提示，上面的代码已经通过判断keyword !== ''实现了这个逻辑。
• 如果列表项内容包含特殊字符，includes方法依然可以正常匹配，不需要额外处理。
• 如果页面初始加载时搜索框有默认值，可以手动触发一次input事件来执行初始过滤：searchInput.dispatchEvent(new Event('input'));

功能扩展思路

如果需要扩展功能，可以尝试以下方向：

• 添加过滤时的动画效果，让列表项的显示隐藏更平滑。
• 支持多关键词搜索，将输入内容按空格拆分后分别匹配。
• 增加搜索历史记录功能，将用户常用的搜索关键词保存到本地存储。

JavaScript动态搜索过滤无结果提示前端交互修改时间：2026-06-12 08:21:35