Question

I’m running into issues with the following code:

var setupSearch = {

searchSuggest: function(field) {
    $.getJSON('/get-all-journals', {'url':'on'}, function(data) {

        var SHCount = Number($.cookie('SHCount'));
        var SHArray = new Array();
        for (i=1; i <= SHCount; i++) {
            SHArray.push($.cookie('SH'+i));
        }
        $(field).ddautocomplete(removeDuplicate(SHArray), data.response.docs, {
            matchContains: true,
            max: 5,
            cacheLength: 5000,
            selectFirst: false,
            scroll: false,
            formatResult: function(str) { return str; },
            formatItem2: function(item) {
                return item.journal_display_name;
            },  
            formatMatch2: function(item) {
                return item.journal_display_name;
            },  
            formatResult2: function(item) {
                return item.journal_display_name;
            }   
        }); 
    }); 
},  
                
                        
searchForm: function(form) {

    var field = form.find('textarea');
    // Setup query field for default text behavior
    // setupField(field);

    setupSearch.searchSuggest(field);
    field.autogrow();
        
    field.keydown(function(e) {
        if (e.keyCode == 13) {
            form.submit();
            return false;
        }   
    }); 

    // Make all forms submitting through Advanced Search Form
    form.submit(function(e) {
        e.preventDefault();
        setupSearch.submitSearch(form, field);
    });
}, 


 submitSearch: function(form, field) {
    if (advancedSearch.checkMinFields() || (!field.hasClass('defaultText') && field.val() != '')) {
        // Sync the refine lists
        // syncCheckboxLists($('#refineList input'), $('#advancedRefineList input'));
        form.find('button').addClass('active');
        $('#advancedSearchForm').submit();
    } else {
        $('#queryField').focus();
    }
},

When I try to use the autocomplete drop-down by hitting enter, it seems to hit a "race condition" where the form will submit what I’ve typed rather than what autocomplete places into the textfield. Is there some way I can control the order of events so that the form.submit() will use what autocomplete fills into the text field?

Answer 1

The actual autocomplete dropdown menu is most likely represented as a styled list (or some other element) that is floated to be positioned below the textbox. On submit, have your function wait (a second or two max) for the autocomplete menu to be either destroyed or hidden. This will ensure that the plugin has time to fill in the textbox before the data is submitted.

EDIT

Try something like this:

$("#myDropdown").bind("autocompleteclose", function(){
    // Continue with submitting your form
});

Use that where you would submit your form, and put the submitting code inside the callback. That way, it will wait for the autocomplete to close before submitting the form. You will want to add some kind of timeout to this to prevent it from submitting after a long delay (not sure when something like this might happen, though).