的 1。什么是“来源”

当您在输入中输入一些值时，插件会通过私有方法“_search”执行“搜索”

_search: function(value) {
    this.pending++;
    this.element.addClass("ui-autocomplete-loading");

    this.source({ term: value }, this.response);
}

阅读最后一行，您可以看到该插件希望“source”属性为函数，它执行

请求：具有一个属性term的对象文字，其中包含输入中输入的内容
响应：插件属性response。此属性是一个默认调用私有方法“_response”的函数，它负责显示菜单，过滤列表，关闭菜单等。

的 2。使用“来源”选项

但是阅读文档后，source选项会接受一个数组或网址来远程获取值......那么这是如何工作的呢？

该插件通过私有方法this.source初始化_initSource：

_initSource: function() {
    var self = this,
        array, url;
    if ($.isArray(this.options.source)) {
        array = this.options.source;
        this.source = function(request, response) {
            response($.ui.autocomplete.filter(array, request.term));
        };
    } else if (typeof this.options.source === "string") {
        url = this.options.source;
        this.source = function(request, response) {
            if (self.xhr) {
                self.xhr.abort();
            }
            self.xhr = $.ajax({
                url: url,
                data: request,
                dataType: "json",
                autocompleteRequest: ++requestIndex,
                success: function(data, status) {
                    if (this.autocompleteRequest === requestIndex) {
                        response(data);
                    }
                },
                error: function() {
                    if (this.autocompleteRequest === requestIndex) {
                        response([]);
                    }
                }
            });
        };
    } else {
        this.source = this.options.source;
    }
},

您可以看到，在这两种情况下，插件最终将this.source定义为function(request, response) {...}

如果您提供数组，它会执行response方法以显示使用request.term传递已过滤数组的菜单：
```
this.source = function(request, response) {
    response($.ui.autocomplete.filter(array, request.term));
}
```

如果您提供了网址，则会生成ajax请求，并在成功时执行response方法以显示返回的data：

success: function(data, status) {
    if (this.autocompleteRequest === requestIndex) {
        response(data);
    }
},

否则，它使用提供的选项值

第3。将函数（请求，响应）作为“源”选项值

传递时

所以当你以这种方式调用插件时：

$(...).autocomplete({
    source: function(request, response) { ... }
});

你实际上没有为插件提供任何数据！

但您有机会以您希望的方式收集数据（其他是数组或网址），并且仍然可以通过参数访问插件功能。您通过request.term获得了输入内容，并且可以执行response回调来显示结果。

示例？自动填充演示页面......

如果您转到Autocomplete Multiple values演示页面，jquery ui团队将使用此功能。

数据存储在javascript数组var availableTags = [...];

中

他们以这种方式定义source选项：

source: function(request, response) {
    // delegate back to autocomplete, but extract the last term
    response($.ui.autocomplete.filter(availableTags, extractLast(request.term)));
}

使用特殊处理方法过滤availableTags数组以处理输入中的多个值
调用response函数显示已过滤的数组

源回调的请求对象是什么？

1 个答案:

的 1。什么是“来源”

的 2。使用“来源”选项

第3。将函数（请求，响应）作为“源”选项值