jQuery UI自动完成语法

Question

有人可以帮助我理解以下代码吗？ 我在这里找到的。

它利用了带有远程源的JQuery UI自动完成功能。 我已尽力注释了该代码，随后出现了一个更精确的问题。

    $( "#city" ).autocomplete({
        source: function( request, response )  {
//request is an objet which contains the user input so far
// response is a callback expecting an argument with the values to autocomplete with
            $.ajax({
                url: "http://ws.geonames.org/searchJSON", //where is script located 
                dataType: "jsonp", //type of data we send the script
                data: { //what data do we send the script 
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    name_startsWith: request.term
                },
                success: function( data ) { //CONFUSED!
                    response( 
                        $.map( 
                        data.geonames, function( item ) { 
                                            return {
                                                    label: item.name+(item.adminName1 ? ","+item.adminName1:"")+","+item.countryName,   
        value: item.name
                                            }
                                        }
                        )
                    );
                  }
            });
        }
    });

如您所见，我不理解成功函数和响应回调的用法。

我知道成功函数字面量是一个AJAX选项，当AJAX查询返回时会调用该选项。 在这种情况下，似乎封装了对响应回调的调用？ 哪个定义在哪里？ 我认为根据回调的定义，应该单独调用它吗？

谢谢！

Answer 1

文档（“概述”页面）定义的response对象：

响应回调，它期望单个参数包含要向用户建议的数据。 此数据应根据提供的术语进行过滤，并且可以采用上述针对简单本地数据（具有标签/值/均为属性的字符串数组或对象数组）描述的任何格式。 提供自定义源回调以处理请求期间的错误时，这一点很重要。 即使遇到错误，也必须始终调用响应回调。 这样可以确保小部件始终具有正确的状态。

因此，“响应”参数实际上是一个回调，必须在成功完成自动完成项的ajax检索后调用它。

由于您的数据将通过AJAX返回，因此您的代码必须手动更新小部件。 jQueryUI将参数作为函数提供，以便您的代码可以通过调用该函数来进行更新。

您可以看到在用于source选项的函数的声明中定义的response对象：

source: function( request, response )

您甚至可以将AJAX调用排除在等式之外，然后执行以下操作：

source: function(request, response) {
    response([{label:'foo', value: 'foo'},{label:'bar', value:'bar'}]);
}

立即使用小部件的标签/值对数组调用response回调。