5

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

它利用带有远程源的 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 查询返回时调用。在这种情况下，它似乎封装了对响应回调的调用？哪个定义在哪里？我认为根据回调的定义，它应该自己调用吗？

谢谢！

4

1 回答 1

6

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

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

因此，'response' 参数实际上是一个回调，必须在 ajax 自动完成项检索成功时调用。

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

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

source: function( request, response )

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

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

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

于 2010-12-26T02:33:12.790 回答