JQuery UI Autocomplete показывает ответ на предыдущий текст

Question

Я использую автозаполнение Jquery. Если пользователь вводит 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 в переменной и сравнить его с параметром xhr, который вы получаете при обратном вызове AJAX.Вызывайте функцию ответа, только если они совпадают.Вы также можете соответствующим образом настроить параметр «delay».

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();
    }
});