Отмена автозаполнения JQuery UI при отправке формы

Question

Привет,

У меня есть ввод автозаполнения jqueryui, который использует вызов ajax для заполнения предложений.Как мне убедиться, что при отправке формы предложения не появляются?Я пытался вызвать метод «close», но он не работает, так как форма может быть отправлена ​​до завершения вызова ajax.

Я создал скрипку, демонстрирующую мою проблему здесь: http://jsfiddle.net/P7VJf/5/

Это основано на демонстрационной версии jqueryui: http://jqueryui.com/demos/autocomplete/#remote-jsonp

Вот код:

$(function(){       
    $('form').submit(function(){
        /*
            when the form is submitted, i want to cancel auto complete
            if the ajax call hasn't completed, the suggestions
            will still show even if we call close here
        */
        $("#city").autocomplete("close");        
        $('span').html(Math.random() * 3);
        return false;
    });   

    $("#city").autocomplete({
        delay: 300,
        source: function( request, response ) {
           $.ajax({
                url: "http://ws.geonames.org/searchJSON",
                dataType: "jsonp",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    name_startsWith: request.term
                },
                success: function( data ) {
                    response( $.map( data.geonames, function( item ) {
                        return {
                            label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                            value: item.name
                        }
                    }));
                }
            });
        },
        minLength: 2
    });          
});

Любая помощь очень ценится.

Answer 1

Опираясь на ответ Xnake, я получил это с помощью команды "destroy". Проблема в том, что это полностью убивает автозаполнение, поэтому вам придется заново его настроить. Я сделал это путем рефакторинга первоначального вызова autocomplete в отдельную функцию, которую я могу затем вызвать снова после команды destroy. Как это:

function configureAutocomplete() {

    $("#city").autocomplete({
        delay: 300,
        source: function( request, response ) {
           $.ajax({
                url: "http://ws.geonames.org/searchJSON",
                dataType: "jsonp",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    name_startsWith: request.term
                },
                success: function( data ) {
                    response( $.map( data.geonames, function( item ) {
                        return {
                            label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                            value: item.name
                        }
                    }));
                }
            });
        },
        minLength: 2
    });        
}

$(function(){       
    $('form').submit(function(){
        /*
            when the form is submitted, i want to cancel auto complete
            if the ajax call hasn't completed, so destroy the existing
            autocomplete and set up a new one
        */
        $("#city").autocomplete("destroy");
        configureAutocomplete();
        $('span').html(Math.random() * 3);
        return false;
    });   

    configureAutocomplete();
});

Answer 2

Вы пытались использовать вместо этого уничтожение, т.е. $ ("# city"). Autocomplete ("destroy");