Javascript jQuery/AJAX在键入任何字段时显示所有加载程序

我用

jQuery/AJAX显示所有加载程序，同时键入下面的任何字段，这是我的示例代码，底部有一个示例图像，如当前发生的情况

我的问题是，当我键入职位名称时，然后显示像city这样的所有加载程序，另一方面，城市输入也一样

问题是如何只显示这个加载器，而我键入这个，就像我键入的职位，然后想显示加载器的职位输入文件，也不为城市，与城市相同

如果我不解释也可以

<form action="/search" accept-charset="UTF-8" method="get">
    <div class="row">
        <div class="col-md-6"> 
            <div class="job-search-field">

                <input type="text" name="key" id="key" placeholder="Keyword or Label like: Top,Mid,Entry" class="form-control" autocomplete="off">
                <i class="icofont icofont-user-search"></i>
                <div class="loader" style="display: none;"></div>
            </div>
        </div>

        <div class="col-md-6 p-l"> 
            <div class="city-field">
                <input type="text" name="city" id="city" placeholder="City" class="form-control" autocomplete="off">
                <i class="icofont icofont-location-pin"></i>
                <div class="loaderCity" style="display: none;"></div>

                <button type="submit" class="btn btn-default">Search</button>
            </div>
        </div>
    </div>
</form>

示例图像

您正在为文档调用ajaxStart（）函数，这意味着如果在页面或文档中启动了任何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");
    });
});

代码

$(".loaderCity").css("display", "block");
$(".loader").css("display", "block");

将在文档ajaxStart上调用两者时同时执行

相反，您可以尝试在$.ajax代码上单独隐藏和显示加载程序

// Ajax code for jobsearch.
$.ajax({
   url: 'yourURL',
   type: 'post',
   data: {parameter:data},
   beforeSend: function(){
    // Show image container
        $("#loader").show();
   },
   success: function(response){
       //Your Success code
    },
    complete:function(data){
        // Hide image container
        $("#loader").hide();
    }
 });

您可以在ajax调用中包含beforesend和complete函数以用于其他输入

希望这有帮助。

尝试将

$（文档）。ajaxComplete

更改为

$（文档）。ajaxStop

---

希望这能有所帮助。

让我们分析一下你的js代码

$.ajax({
  url: "your_url.com",
  ... //all other ajax settings and callbacks
  beforeSend: function( xhr ) {
    $(".loader").css("display", "block");
  },
  complete: function( xhr ) {
    $(".loader").css("display", "none");
  }
});

var options = {
  url: "resources/countries.json",
  getValue: "name",
  list: {
    onLoadEvent: function () {
      (".loader").css("display", "block");
    }
    onShowListEvent: function() {
      $(".loader").css("display", "none");
    }   
  }
};

$("#your-id").easyAutocomplete(options);

$（函数（）{
$（文档）.ajaxStart（函数（）{
$（“.loader”）.css（“显示”、“块”）；
});
$（文档）.ajaxComplete（函数（）{
$（“.loader”）.css（“显示”、“无”）；
});
});
$（函数（）{
$（文档）.ajaxStart（函数（）{
$（“.loaderCity”）.css（“显示”、“块”）；
});
$（文档）.ajaxComplete（函数（）{
$（“.loaderCity”）.css（“显示”、“无”）；
});
});

$（document）.ajaxStart（function（）…

意味着我们将事件绑定到文档。您可以执行两次

每次都会触发事件

每当要发送Ajax请求时

因此，当任何Ajax请求即将发送时，会发生以下情况：

$(".loader").css("display", "none");
$(".loaderCity").css("display", "none");

两个事件都会触发（因为它们是相同的），并执行以下操作：

$(".loader").css("display", "block");
$(".loaderCity").css("display", "block");

事件也会发生同样的事情

当任何Ajax请求完成时，会发生以下情况：

$(".loader").css("display", "none");
$(".loaderCity").css("display", "none");

我希望你能理解（因为你就是这么做的）

现在解决方案是什么？

与其将事件或事件绑定到文档，不如使用和回调

示例

$.ajax({
  url: "your_url.com",
  ... //all other ajax settings and callbacks
  beforeSend: function( xhr ) {
    $(".loader").css("display", "block");
  },
  complete: function( xhr ) {
    $(".loader").css("display", "none");
  }
});

var options = {
  url: "resources/countries.json",
  getValue: "name",
  list: {
    onLoadEvent: function () {
      (".loader").css("display", "block");
    }
    onShowListEvent: function() {
      $(".loader").css("display", "none");
    }   
  }
};

$("#your-id").easyAutocomplete(options);

编辑

既然你在使用，你就应该跟着

您可以使用列出的事件

那么就这样做（示例）

---

您应该在某个特定事件时启动ajax请求，例如当用户使用debouncer（或use）在字段中键入内容时

一些快速代码，请原谅我的错误：

//When typing in the Keyword input field call the search function 
//after the last keyup event.
$("#key").keyUp(function(event) {
   debounce(search(inputElem), 300);
})

//Function that performs the ajax
function search(inputElem) {
  //From the input element, get the `.loader`
  inputElem.parent().find(".loader").show();
  $.ajax({
    url: "/search",
  }).done(function() {
    //Do something with the response
    //Hide the `.loader`
    inputElem.find(".loader").hide();
  });
}

//Debounce function that executes the given function after a certain time
function debounce(fn, bufferInterval) {
  var timeout;

  return function () {
    clearTimeout(timeout);
    timeout = setTimeout(fn.apply.bind(fn, this, arguments), bufferInterval);
  };

}

---

ajaxStart会在您的站点发出的每个AJAX请求上触发，因此您需要找到一种方法来识别“哪个”AJAX请求它就在里面，或者使用一个更合适的处理程序开始-哪一个可能是，取决于首先触发这些AJAX请求的是什么。调用AJAX的函数是什么？我在你的JS代码中没有看到它。@manhmaluc谢谢！我用过这个，我似乎不

$。AJAX

函数类型的代码谢谢！我哈ajax（{代码类型请建议，我可以做什么？ajax代码类型请建议，我可以做什么？ajax代码类型请建议，我可以做什么