jQuery UI Автозаполнение Отмена последнего запроса при наборе - PullRequest
Новая
       28

jQuery UI Автозаполнение Отмена последнего запроса при наборе

2 голосов
/ 08 февраля 2012

Я использую автозаполнение 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 Ответ

1 голос
/ 08 февраля 2012

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

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

Вам необходимо указать в качестве источника функцию, а не URL. Этот ТАК вопрос описывает как. Затем, в этой функции, увеличьте переменную count, которая говорит, что "поиск в процессе". Затем выполните поиск, выполнив «ajax get». Также исправьте renderMenu для (a) рендеринга, только если выполняется один поиск, и (b) для уменьшения количества запросов.

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

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(), когда поступит новый.

...