EasyAutocomplete下jQuery/AJAX输入时仅显示对应加载器问题

嘿，你的问题根源很明确：你把AJAX的开始/完成事件绑定在了全局的document对象上，所以不管哪个字段触发搜索请求，所有的加载器都会同时显示/隐藏。下面是具体的修复方案：

问题分析 #

原来的代码里，你给document绑定了两次ajaxStart和ajaxComplete：

• 第一次触发时显示/隐藏.loader
• 第二次触发时显示/隐藏.loaderCity

但只要页面上有任何AJAX请求发起，document的ajaxStart就会同时触发这两个处理函数，导致两个加载器都出现——这就是你看到的现象。

修复步骤 #

我们需要针对每个EasyAutocomplete实例单独控制加载器，而不是用全局事件。

1. 移除全局AJAX事件绑定

首先删掉原来这两段全局绑定的代码：

$(function(){ 
  $(document).ajaxStart(function(){ $(".loader").css("display", "block"); }); 
  $(document).ajaxComplete(function(){ $(".loader").css("display", "none"); }); 
}); 
$(function(){ 
  $(document).ajaxStart(function(){ $(".loaderCity").css("display", "block"); }); 
  $(document).ajaxComplete(function(){ $(".loaderCity").css("display", "none"); }); 
}); 

2. 为每个字段配置EasyAutocomplete的搜索回调

在初始化EasyAutocomplete的时候，利用插件自带的onSearchStart和onSearchComplete回调，精准控制对应字段的加载器：

$(function() {
  // 职位标题字段的EasyAutocomplete配置
  $('#key').easyAutocomplete({
    // 你的其他配置项（比如接口地址、数据格式等）
    url: "/your-search-api-for-key",
    // ... 其他配置参数
    onSearchStart: function() {
      // 显示当前字段对应的加载器
      $(this).siblings(".loader").show();
    },
    onSearchComplete: function() {
      // 隐藏当前字段对应的加载器
      $(this).siblings(".loader").hide();
    }
  });

  // 城市字段的EasyAutocomplete配置
  $('#city').easyAutocomplete({
    // 你的其他配置项
    url: "/your-search-api-for-city",
    // ... 其他配置参数
    onSearchStart: function() {
      // 显示当前字段对应的加载器
      $(this).siblings(".loaderCity").show();
    },
    onSearchComplete: function() {
      // 隐藏当前字段对应的加载器
      $(this).siblings(".loaderCity").hide();
    }
  });
});

关键说明 #

• onSearchStart：当当前字段开始发起搜索请求时触发，我们通过$(this).siblings(".loader")定位到当前输入框同级的加载器元素，然后显示它。
• onSearchComplete：当搜索请求完成（无论成功或失败）时触发，隐藏对应的加载器。
• 这种方式只会对当前触发搜索的字段生效，完全不会影响其他字段的加载状态。

问题截图 #

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