Question

有人可以帮我理解以下代码吗？我发现它here。

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

谢谢！

Answer 1

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

响应回调，它需要一个包含数据的单个参数建议用户。这个数据应该根据提供的内容进行过滤术语，可以是任何格式上面描述了简单的本地数据（String-Array或Object-Array with 标签/价值/两个属性）。它的提供自定义时很重要源回调来处理错误在请求期间。你必须永远即使你调用响应回调遇到错误。这确保了小部件总是正确的状态。

所以，'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回调。

JQuery UI自动完成语法

1 个答案: