Question

I have a textbox bound to jQuery UI’s autocomplete. When the user selects an option from the autocomplete dropdown, JSON data is used to populate a form with user details from a remote source.

I have a reset button with the following function bound to it:

$('#btn_reset').on('click', function() {
    $('#txt_name').autocomplete('search');
    $('.ui-menu-item').children().eq(0).click();
    return false;
});

This works with a small amount of local data as search is completed before click() is called, however with a large amount of external data, the search does not complete in time, thus giving me an 'item' is null or not an object error.

How can I get jQuery to wait until search is completed before calling click()?

Here is a working fiddle using a local data source: http://jsfiddle.net/3KTtT/3/

Answer 1

The solution was to bind a function to the open event of autocomplete to check for a boolean variable to determine whether or not the form was being reset.

var reset = false;
$(function() {    
    $('#txt_name').autocomplete({
        source: [{"label":"john smith","address":"19 Tree Lane"}],
        delay: 0,
        autoFocus: true,
        open: function() {
            if(reset){
                $('.ui-menu-item').children().eq(0).click();
                reset = false;
            }
        },
        select: function(event, ui) {
            $('#txt_address').val(ui.item.address);
        }

    });

    $('#btn_reset').on('click', function() {
        reset = true;
        $('#txt_name').autocomplete('search');
        return false;
    });

});

See here for fiddle: http://jsfiddle.net/RVnkz/2/