Jquery UIのオートコンプリートで、以前のテキストのレスポンスが表示されます

Question

私はJqueryオートコンプリートを使用しています。ユーザーが2文字を入力して待機した後、別の文字を入力します。最初の応答が2番目の応答の後に来ると、2番目のリストが一時的に表示され、最初のリストが表示されます。ユーザーが入力を開始した後に最初のリクエストをキャンセルするにはどうすればよいですか？

$("#city").autocomplete({ 
     source: function(request, response) { 
      $.ajax({ 
       url: "/geo/json_autocomplete.php", 
       dataType: "json", 
       data: { 
        term: $("#city").val(), 
        countryid: $("#countryid").val() 
       }, 
       success: function(data) { 
        response($.map(data, function(item) { 
         //console.debug(item.value+" "+item.label+" "+item.id); 
         return { 
          label: item.label, 
          value: item.value, 
          id: item.id 
         } 
        })); 
       } 
      }); 
     }, 
     minLength: 2, 
     delay: 500, 
     select: function(event, ui) { 
      $("#cityid").val(ui.item.id); 
      showForm(); 
     } 
    }); 

Answer 1

あなたは変数にXHRを格納し、AJAXの成功コールバックで取得xhrパラメータとの比較を試みることができます。一致した場合にのみ、応答関数を呼び出します。それに応じて「遅延」パラメータを調整することもできます。

var lastXhr; 

$("#city").autocomplete({ 
    delay: 500, // 500ms between requests. 
    source: function(request, response) { 
     lastXhr = $.ajax({ 
      url: "/geo/json_autocomplete.php", 
      dataType: "json", 
      data: { 
       term: $("#city").val(), 
       countryid: $("#countryid").val() 
      }, 
      success: function(data, status, xhr) { 
       if (xhr === lastXhr) { 
        response($.map(data, function(item) { 
        //console.debug(item.value+" "+item.label+" "+item.id); 
         return { 
          label: item.label, 
          value: item.value, 
          id: item.id 
         }; 
        })); 
       } 
      } 
     }); 
    }, 
    minLength: 2, 
    delay: 500, 
    select: function(event, ui) { 
     $("#cityid").val(ui.item.id); 
     showForm(); 
    } 
});