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

正如你所看到的，我不明白成功函数和响应回调的使用。

我知道 success 函数文字是一个 AJAX 选项，当 AJAX 查询返回时会调用它。这样的话，好像封装了一个响应回调的调用？哪个是在哪里定义的？我认为根据回调的定义，它应该被单独调用？

谢谢！

Answer 1

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

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

因此，“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 回调。