библиотека jQuery автозаполнения пользовательского интерфейса, отменить последний запрос, при вводе

Я использую автозаполнение jQuery UI для поиска города на моем сайте. Он начинает поиск после того, как пользователь ввел 3 символа.

Мне интересно, как изменить этот скрипт, чтобы прервать последний запрос, если пользователь продолжает печатать. 
function enableCitiesAutocomplete() {
    var url = LIST.urls.api_cities_search;

    $('#txt_search_city').autocomplete({
        source: url,
        minLength: 3,
        select: function( event, ui ) {
            $(this).val( ui.item.value );
            $( "#id_city" ).val( ui.item.id );
            $(this).closest('form').submit();
        }
    });
}
1 2
javascript jquery jquery-autocomplete jquery-ui-autocomplete

1 ответ:

Я не знаю, можете ли вы" прервать " завершение, которое уже началось. Но вы можете получить то, что хотите, прервав рендеринг части автозаполнения. Это может сработать, если автозаполнение состоит из запроса и визуализации, а запрос включает в себя сетевую транзакцию.
Если есть запрос и рендеринг, а запрос-это просто поиск по локально сохраненному списку, то это, вероятно, не сработает, потому что задержка слишком мала.

Это так Вопрос описывает как обезьяна-патч renderMenu и renderItem fns в пакете автозаполнения jQuery. Я думаю, что вы можете использовать тот же подход обезьяны-патча.

Вам нужно указать в качестве источника функцию,а не URL-адрес. Этот так называемый вопрос описывает, как. Затем в этой функции увеличьте переменную count, которая говорит: "поиск находится в процессе". Затем выполните поиск, выполнив команду "ajax get". Также исправьте renderMenu на (а) только для рендеринга, если выполняется один поиск, и (Б) декремент счет поисков.

Это, вероятно, будет выглядеть примерно так: 

var queriesInProcess = 0;
var ac = $('#txt_search_city').autocomplete({ 
    minLength: 3, 
    select : .... ,
    // The source option can be a function that performs the search, 
    // and calls a response function with the matched entries. 
    source: function(req, responseFn) { 
        var url = baseUrl + req.term;
        queriesInProcess++;
        $.ajax({
          url: url,
          //data: data,
          success: function(json,xhr) {
              queriesInProcess--;
              var a = ....retrieve from the json .... 
              responseFn( a ); 
            },
            errpr : function () { queriesInProcess--; },
          dataType: 'json'
        });
    } 
}); 

ac.data( "autocomplete" )._renderMenu = function( ul, items ) { 
  if (queriesInProcess > 0) return; 
  var self = this; 
  $.each( items, function( index, item ) { 
    self._renderItem( ul, item ); 
  }); 
};

Если вы хотите получить более сложный, вы также можете попробовать прервать ожидающий запрос ajax. Это должно было бы произойти в исходной функции; вам нужно было бы кэшировать / прятать XHR, возвращенный из вызова $.ajax(), и вызывать abort(), когда приходит новый.

1