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'命令实现了这一点。麻烦的是，这完全杀死了自动完成，因此您需要再次重新配置它。我通过将对自动完成的初始调用重构为一个单独的函数来完成此操作，然后我可以在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

您是否尝试过使用destroy，即：$（“＃city”）。autocomplete（“destroy”）; ？

在表单提交上取消JQuery UI自动完成

2 个答案: