javascript - 自动完成成功显示错误数据

Question

所以我有一个用于将关键字发送到另一个页面的 jQuery 代码。在该页面上，我将全世界所有机场的名称作为字符串，并使用 URL 上的关键字过滤这些城市。我的代码运行良好，例如，当我在文本框中键入 istanbul 时，它会返回在该字符串上包含该词的 Istanbul Airports。

当我快速输入单词时，它会发送完整的单词，我在网络选项卡上进行了检查，我希望只返回“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 请求的响应刚刚到达，但您已经输入了下一个字符，因此不再需要旧的响应。就像您输入“g”一样，请求是已发送，服务器为此发送{'germany','georgia'} 但在此响应到达之前，您键入 'h' 所以我们再次请求发送 'gh'，同时旧响应到达并用 Germany/Georgia 替换 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 毫秒，以便仅在这些插槽中发送输入，例如如果用户在 0.2 秒输入“a”，然后在 0.3 秒输入“m”，但随后改变主意按退格键并在 0.4 秒输入“z”，因此在 0.5 秒时发送“az”。没有人那么快，但你明白了。