JQuery UI自动完成语法

Question

有人能帮我理解下面的代码吗？我在这里找到它。

它利用了JQuery UI Autocomplete的远程源。我已经尽可能地注释了代码，并提出了一个更精确的问题。

    $( "#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函数和响应回调的用法。

我知道success函数字面上是一个AJAX选项，在AJAX查询返回时被调用。在这种情况下，它似乎封装了对响应回调的调用？响应回调定义在哪里？我认为按照回调的定义，它应该自己被调用吧？

谢谢！

- djs22

Answer 1

根据文档（“概述”页面）定义，response对象具有以下特点：

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

因此，'response'参数实际上是一个回调函数，在获取自动完成项的AJAX成功时必须调用该函数。

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

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

source: function( request, response )

你甚至可以将AJAX调用排除在外，像这样做：

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

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

- Andrew Whitaker

---

谢谢安德鲁。但是我认为按照回调函数的定义，它不需要被调用，而是在其父函数完成时会自动为您调用。 （这种理解受 http://docs.jquery.com/How_jQuery_Works#Callback_and_Functions 的影响） - djs22

@djs22：没错——除了这种情况，jQuery会为你提供一个回调函数，你需要使用该回调函数传递数据给自动完成小部件（就像在你链接的页面上提供示例时jQuery所做的那样）。 - Andrew Whitaker

@djs22：可以这样想：自动完成小部件需要被告知何时更新，因为你正在使用 AJAX 调用。自动完成实现这一点的方式是提供一个函数，每当你准备好更新小部件（在通过 AJAX 的“success”接收到数据并格式化之后）时就调用该函数。 - Andrew Whitaker

太好了！那解释得非常清楚。为了以后参考，你知道我怎么能区分我所描述的回调和你所描述的回调吗？ - djs22

通常，文档会对你有所帮助。当你定义函数时，它是一个回调函数，就像你所描述的那样。当回调函数传递给你时，通常会作为函数参数（如我所描述的）传递。 - Andrew Whitaker