Question

Greetings,

I have a jqueryui autocomplete input that uses an ajax call to populate the suggestions. How do I ensure when the form is submitted, the suggestions do not appear? I’ve tried calling the “close” method, but that doesn’t work since the form may be submitted before the ajax call has completed.

I have created a fiddle demonstrating my problem here:
http://jsfiddle.net/P7VJf/5/

This is based on the jqueryui demo here:
http://jqueryui.com/demos/autocomplete/#remote-jsonp

Here is the code:

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

Any help is greatly appreciated.

Answer 1

Building on Xnake’s answer, I’ve got this working by using the ‘destroy’ command. The trouble is that this totally kills the autocomplete, so you’ll then need to reconfigure it again. I did this by refactoring the initial call to autocomplete into a separate function that I can then call again after the destroy command. Like this:

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