Question

所以我有一个jQuery代码，用于将关键字发送到另一个页面。在该页面上，我将世界各地的所有机场命名为字符串，并使用URL上的关键字过滤这些城市。我的代码工作得很好，例如当我在我的文本框中键入istanbul时，它返回伊斯坦布尔机场，该字符串包含该字符串。

当我快速输入单词时，它会发送完整的单词并在网络选项卡上检查它，我希望只返回“伊斯坦布尔”，但在某些情况下，它会返回所有带有“stan”的单词。当我清除文本框并输入比之前更慢的单词返回正确的城市。这个问题是因为加载时间过程吗？

我该如何解决这个问题？

这是我的代码：

$('.country').each(function() {
$(this).on('keyup', function(e) {
   var _this = this;

   var element = $(this).val().length;
    if (e.which !== 0 &&
        !e.ctrlKey && !e.metaKey && !e.altKey
    ) {
        if (element > 2) {
            var val = $(this).val()
            val = val.substr(0, 1).toUpperCase() + val.substr(1).toLowerCase();
            $(this).val(val)
            $.ajax({
                url: "secondpage.html",
                type: "get",
                contentType: 'application/json; charset=utf-8',
                data: {
                    key: $(this).val()
                },
                success: function(result) {

                    $(_this).closest(".search_div").find(".result").empty().html(result)
                }
            })
			
        }
    }
})
})

<div class="search_div"> 
<input type="text" value=""  class="country" autocomplete="off" />
<div class="result"></div>
</div>

Answer 1

如果您输入的速度很快，可能会发生以前的ajax请求的响应刚刚到达，但您已经输入了下一个字符，因此不再需要旧的响应。就像您输入的那样＆＃39;克＆＃39;服务器发送的请求{＆＃39;德国＆＃39;格鲁吉亚＆＃39;}但在此响应可能到达之前，您键入＆＃39; h＆＃39;所以我们再次请求＆＃39; gh＆＃39;同时旧响应到达并用德国/格鲁吉亚替换html，这是错误的，以防止这需要取消旧的ajax请求的效果，即。响应将到达，但jQuery将忽略它。

var prevXHR = null; //global

$('.country').each(function() {

  $(this).on('keyup', function(e) {
    //.. code

    //...code 

    prevXHR = $.ajax({
                 url: "secondpage.html",
                 type: "get",
                 contentType: 'application/json; charset=utf-8',
                 data: {
                     key: $(this).val()
                 },
                 success: function(result) {
                    //..code
                 },
                 beforeSend: function(){
                     if(prevXHR && prevXHR.readyState != 4){
                         //before sending any new request neutralize any pending ajax call
                         prevXHR.abort();
                         prevXHR = null;
                     }
                 }

              });
  });
});

同样正如Stavm建议你应该添加一些延迟，如500毫秒，所以输入只会在那些插槽中发送，例如如果用户输入＆＃39;在0.2秒然后＆＃39; m＆＃39;在0.3然后改变思想命中退格和类型＆＃39; z＆＃39;在0.4，所以0.5＆＃39; az＆＃39;被发送。没有一个是那么快，但你明白了。

自动竞争成功显示错误的数据

1 个答案: