将原生JavaScript实时搜索函数改为jQuery版本遇问题求助

我帮你搞定这个问题！首先咱们先把原生JS的实时搜索改成靠谱的jQuery版本，顺便解决清空输入框后结果不同步的bug——你的核心问题其实是代码触发清空时不会自动触发input事件，再加上原代码里的选择器错误，才导致功能失效。

先假设你的HTML结构是这样的（结构不同的话调整选择器即可） #

<input type="text" id="search_emotions" placeholder="搜索表情...">
<ul id="emotions">
  <li><a href="#">开心 😊</a></li>
  <li><a href="#">难过 😢</a></li>
  <li><a href="#">生气 😠</a></li>
  <li><a href="#">惊讶 😮</a></li>
</ul>
<button id="clear-search">清空搜索</button>

jQuery 完整实现代码 #

$(document).ready(function() {
  // 把搜索逻辑抽成独立函数，方便复用
  function filterEmotions() {
    // 获取输入框内容，转小写实现不区分大小写搜索
    var searchContent = $("#search_emotions").val().toLowerCase();
    
    // 遍历所有表情项，根据匹配结果切换显示/隐藏
    $("#emotions li").each(function() {
      var itemText = $(this).text().toLowerCase();
      // toggle()会自动根据条件显示或隐藏元素，简化逻辑
      $(this).toggle(itemText.includes(searchContent));
    });
  }

  // 监听输入框的input事件，实时触发搜索
  $("#search_emotions").on("input", filterEmotions);

  // 处理清空按钮的点击事件
  $("#clear-search").on("click", function() {
    // 清空输入框内容
    $("#search_emotions").val("");
    // 手动调用搜索函数，强制同步更新结果（关键！）
    filterEmotions();
  });
});

关键优化点说明 #

• 修复选择器错误：所有id选择器必须加#，比如$("#search_emotions")而不是$("search_emotions")——后者是找标签名为search_emotions的元素，显然不存在，这是你原代码无法运行的核心原因之一。
• 解决清空不同步问题：代码调用val("")清空输入框时，不会自动触发input事件，所以必须手动调用filterEmotions()，让搜索结果跟着同步清空。
• 复用搜索逻辑：把过滤逻辑封装成独立函数，不管是用户输入还是清空操作，都能调用同一个函数，避免代码重复，也保证状态一致。
• 提升用户体验：统一转小写实现不区分大小写搜索，用户输入大写也能匹配到结果；用toggle()替代繁琐的show()/hide()判断，代码更简洁。

如果你的HTML结构有差异（比如用class而不是id），只需要把选择器改成对应的.class-name即可，核心逻辑完全通用。

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