基于jQuery Autocomplete搜索结果实现Div显示/隐藏的方法求助

云原生阿岚

2026-5-25

基于jQuery Autocomplete搜索结果控制Div显示/隐藏的实现方案

没问题，我帮你搞定这个功能。先看修改后的完整代码，我会逐部分给你解释逻辑：

$('#catalogSearch .searchBox')
  .mouseup(function (e) { 
    e.preventDefault(); 
  })
  .autocomplete({ 
    source: services, 
    autoFill: true, 
    minChars: 0, 
    focus: function (event, ui) { 
      event.preventDefault(); 
      $('#catalogSearch .searchBox').val(ui.item.label); 
      return false; 
    }, 
    select: function (event, ui) { 
      // 保留你原来的选中逻辑，比如赋值或跳转
      // 可选：如果选中后需要隐藏目标Div，加这行：
      // $('#targetDiv').hide();
    },
    // 核心：监听搜索结果返回事件
    response: function(event, ui) {
      // 替换成你实际要控制的Div选择器
      const targetDiv = $('#targetDiv');
      
      // 根据结果数量判断显示/隐藏
      if (ui.content.length === 0) {
        targetDiv.hide();
      } else {
        targetDiv.show();
      }
    }
  });

// 初始化时默认隐藏目标Div（按需调整）
$('#targetDiv').hide();

关键逻辑说明

response事件是核心：这个事件会在Autocomplete处理完数据源（不管是本地数组还是远程AJAX请求）、准备渲染搜索结果前触发。ui.content就是即将展示的结果数组，通过它的长度就能知道有没有匹配的搜索结果。
适配各种数据源：不管你的services是本地静态数组，还是返回JSON的远程接口，这个逻辑都能正常工作——因为response事件会在数据就绪后统一触发。
自定义调整：
- 把#targetDiv换成你实际要控制的Div的选择器；
- 如果希望选中搜索项后隐藏Div，在select事件里添加$('#targetDiv').hide();即可；
- 如果不需要初始化隐藏Div，删掉最后那行代码就行。