Php 当用户完成键入时运行jqueryajax请求

我正在做我的项目，我添加了图像搜索功能，我没有什么问题，当ajax启动时，我限制了至少2个字符，但当我键入超过2个字符时，我不希望出现这种情况，而是在用户完成键入后，我才想运行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)
                }
            }
        })
    }
 })
});

$（函数（）{
var minlength=2；
$（“#图像_查询”）.keyup（函数（）{
$（'span_result'）.html（'Loading…'）；
var=这个，
value=$（this.val（）；
如果（value.length>=最小长度）{
$.ajax({
键入：“获取”，
url:“image.php”，
数据：{
“图像查询”：值
},
数据类型：“文本”，
成功：函数（html）{
if（value=$（that）.val（））{
$（“#span_结果”）.html（html）
}
}
})
}
})
});

我的HTML：-

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

去

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

---

您可以在W3学校中找到一个模糊示例，我认为，在发送ajax请求之前，您应该使用

setTimeout（）

和keyup事件。根据您的需要，延迟可能为2或3秒

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

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

---

在AJAX响应的末尾。

尽管可能有更多的最佳方法，但我始终认为这是最简单和最好的方法。我想这就是你要找的。另外请注意，隐藏图像应该放在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);
  });
});

var timeout=null；
var minlength=2；
$（“#图像_查询”）.keyup（函数（）{
$（'span_result'）.html（'Loading…'）；
//清除上次超时检查
clearTimeout（超时）；
var=这个；
var值=$（this.val（）；
如果（value.length>=最小长度）{
//
//在用户停止键入后运行ajax调用1秒
//
timeout=setTimeout（函数（）{
$.ajax({
键入：“获取”，
url:“image.php”，
数据：{
“图像查询”：值
},
数据类型：“文本”，
成功：函数（html）{
//隐藏图像
$（#span_result.loader）.hide（）；
if（value=$（that）.val（））{
$（“#span_结果”）.html（html）
}
}
});
}, 1000);
});
});

有两种选择：节流或去抖动。去Bouncing可能是您想要的，但是节流会给您带来更好的结果。这里有一个插件，两者兼有：我看起来很模糊，但在我的情况下，当用户单击外侧输入框时模糊就可以工作，用户将键入，我想使用keyup功能，但当用户完成键入时，我想触发ajax，比如说2秒或更长时间。你能提供一个例子吗？我是新来的jqueryThis是一个很好的例子，您可以使用值'2000'将其延迟2秒。是的，我刚刚发现这与我想要的一样，但当我清除输入框时有一个问题，我的加载程序仍然存在，所以当用户清除且输入为空时，我如何停止加载程序？