Question

我正在处理我的项目我添加了图像搜索功能，我遇到了一点麻烦我在ajax火时限制了最少2个字符但是当我键入更多然后2个字符ajax运行后每个字母我都不希望相反，我只想在用户完成输入后才能运行ajax我发现与此相关的几个问题我尽可能多地尝试但是他们没有帮助我。

更新： - 还有一件事，当用户清除输入框时，我的加载器仍在那里我想隐藏加载器，如果输入为空

我的Jquery： -

 $(function() {
 var minlength = 2;
  $("#image_query").keyup(function() {
    $('#span_result').html('<div class="loader">Loading...</div>');
    var that = this,
        value = $(this).val();
    if (value.length >= minlength) {
        $.ajax({
            type: "GET",
            url: "image.php",
            data: {
                'image_query': value
            },
            dataType: "text",
            success: function(html) {
                if (value == $(that).val()) {
                    $("#span_result").html(html)
                }
            }
        })
    }
 })
});

我的HTML： -

<form method="get" action="">
<input type="text" id="image_query" placeholder="Search Here For Images">
<button type="submit">Go</button>

Answer 1

我认为，在发送ajax请求之前，您应该使用setTimeout()以及keyup事件。根据您的需要，延迟可能是2或3秒。

编辑：要清除加载程序映像，您可以执行以下操作：

$(#span_result .loader).hide();

最后在AJAX响应中。

Answer 2

尽管可能有更多的最佳方法-我总是觉得这是最简单，最好的方法。我认为这就是您想要的。另外请注意，隐藏图像应放在ajax成功回调中。

var timeout = null;
var minlength = 2;

$("#image_query").keyup(function() {
  $('#span_result').html('<div class="loader">Loading...</div>');

  // clear last timeout check
  clearTimeout(timeout);

  var that = this;
  var value = $(this).val();

  if (value.length >= minlength) {
    //
    // run ajax call 1 second after user has stopped typing
    //
    timeout = setTimeout(function() {
      $.ajax({
        type: "GET",
        url: "image.php",
        data: {
          'image_query': value
        },
        dataType: "text",
        success: function(html) {
          // hide image
          $(#span_result .loader).hide();

          if (value == $(that).val()) {
            $("#span_result").html(html)
          }
        }
      });
    }, 1000);
  });
});

Answer 3

您可以使用jQuery blur（）方法捕获用户完成输入的时间。然后在ajax调用之前检查blur函数内的minlength。

您可以在W3学校here

中找到模糊的示例

用户完成输入后运行jquery ajax请求

3 个答案: