如何实现点击按钮时触发与回车相同的搜索列表筛选功能

我明白你的需求啦——现在按回车能正常筛选门店列表，但点击搜索按钮没反应，咱们来把这个功能补上～其实核心就是把重复的筛选逻辑抽出来复用，这样不管是回车还是点击按钮，都能触发一模一样的操作。

修改后的完整代码 #

先给你看调整好的JS代码，CSS和HTML不需要改动：

$(function() {
  
  $('.stores-search-not-found').hide();

  // 把筛选逻辑抽成独立函数，方便复用
  function filterStores(filter) {
    let hiddenCount = 0;
    const totalCards = $('.stores-search-lists .card').length;
    $('.stores-search-not-found').hide();
    
    // 遍历所有卡片进行筛选
    $('.stores-search-lists .card').each(function() {
      if ($(this).text().search(new RegExp(filter, "i")) < 0) {
        $(this).hide();
        hiddenCount++;
      } else {
        $(this).show();
      }
    });

    // 统一判断是否显示“未找到”提示
    $('.stores-search-not-found').toggle(hiddenCount === totalCards);
  }

  // 回车事件：调用筛选函数
  $(".stores-input-search").on('keyup', function (e) {
    if (e.key === 'Enter' || e.keyCode === 13) {
      e.preventDefault();
      filterStores($(this).val());
    }
  });

  // 按钮点击事件：同样调用筛选函数
  $("#cta-search-button").on('click', function() {
    const filter = $(".stores-input-search").val();
    filterStores(filter);
  });
  
});

关键改动点说明 #

• 抽离独立筛选函数：把原来回车事件里的筛选逻辑单独封装成filterStores函数，这样不管是回车还是按钮点击，都能直接调用，避免重复写相同代码，后期维护也更方便。
• 绑定按钮点击事件：给搜索按钮（#cta-search-button）绑定点击事件，点击时直接获取输入框的当前值，传给筛选函数，和回车触发的逻辑完全一致。
• 优化未找到提示逻辑：原来的计数判断有点绕，调整后统计被隐藏的卡片数量，当所有卡片都被隐藏时才显示“未找到”提示，用toggle()方法一行搞定判断，逻辑更清晰准确。

这样改完之后，不管你是按回车，还是点击搜索按钮，都会执行一模一样的筛选操作，完美实现你要的效果～

备注：内容来源于stack exchange，提问作者clarkf