如何在jQuery筛选功能中添加「未找到记录」提示

很容易搞定这个需求！你的现有逻辑已经完成了大部分功能，只需要添加无匹配结果时的提示判断和对应的提示元素就行。下面是具体的修改步骤：

第一步：添加提示元素到HTML #

首先在你的菜单列表容器里（比如.prio-app-menu-list内部）添加一个默认隐藏的提示框，用来显示“未找到记录”：

<div class="no-results" style="display: none; padding: 12px; text-align: center; color: #666;">未找到记录</div>

第二步：修改JavaScript搜索逻辑 #

接下来调整你的search_menu_list函数，核心是统计匹配到的元素数量，根据数量决定是否显示提示。我还优化了DOM选择的重复调用，提升一点性能：

search_menu_list() {
  return function (event) {
    // 提前缓存DOM元素，避免重复查询提升性能
    const $menuList = $('.prio .prio-app-navigation-footer-module .prio-app-menu-list');
    const $menuItems = $menuList.find('li');
    const $noResults = $menuList.find('.no-results');
    
    let searchText = $.trim($(this).val().toLowerCase());

    if (searchText === '') {
      // 搜索框为空：显示所有菜单项，隐藏提示
      $menuItems.show();
      $noResults.hide();
      return;
    }

    // 先隐藏所有菜单项和提示
    $menuItems.hide();
    $noResults.hide();

    // 过滤匹配的菜单项
    const $matchedItems = $menuItems.filter(function () {
      return $(this).data('name').toLowerCase().indexOf(searchText) > -1;
    });

    if ($matchedItems.length === 0) {
      // 没有匹配结果：显示提示
      $noResults.show();
    } else {
      // 有匹配结果：显示匹配项
      $matchedItems.show();
    }
  }
}

关键修改点说明 #

• 提前缓存DOM元素：把$menuList、$menuItems、$noResults都提前获取，避免每次搜索都重复查询DOM，提升性能
• 空搜索处理：清空输入时不仅显示所有li，还要隐藏提示框
• 匹配结果判断：通过$matchedItems.length判断是否有匹配项，为0时显示提示，否则显示匹配的li

这样修改后，当用户输入的内容没有匹配到任何菜单项时，就会显示“未找到记录”的提示啦！

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