使用getJSON获取数据时遇到Javascript自动完成库的问题

时间:2012-03-27 23:36:48

标签: javascript javascript-events jquery-autocomplete getjson race-condition

我遇到了以下代码的问题:

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

当我尝试通过按Enter键使用自动完成下拉列表时,它似乎达到了“竞争条件”,其中表单将提交我键入的内容,而不是自动完成文本放入文本字​​段。有没有什么方法可以控制事件的顺序,以便form.submit()将使用自动完成填充到文本字段?

1 个答案:

答案 0 :(得分:0)

实际的自动完成下拉菜单很可能表示为浮动位于文本框下方的样式列表(或其他一些元素)。在提交时,让您的功能等待(最多一秒或两次)自动完成菜单被破坏或隐藏。这将确保插件有时间在提交数据之前填写文本框。

修改

尝试这样的事情:

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

使用您提交表单的位置,并将提交代码放在回调中。这样,它将在提交表单之前等待自动完成关闭。您需要为此添加某种超时以防止它在长时间延迟后提交(不确定何时可能会发生这种情况)。