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

Question

自动完成函数的 Source 回调将请求和响应对象作为参数。我找不到任何有用的信息来说明这些对象到底是什么以及它们定义了哪些属性和方法。

Answer 1

我认为了解function(request, response) {...} 的最佳方式是查看插件本身的源代码。

我会尽量讲清楚，如果您需要更多详细信息或解释，请告诉我。

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 选项接受一个数组或一个 url 来远程获取值...那么这是如何工作的呢？

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

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

• 如果你提供一个url，它会发出ajax请求，成功后，执行response方法来显示返回的data：

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

• 否则，它按原样使用提供的选项值

---

3。将函数（请求、响应）作为“源”选项值传递时

所以当你这样调用插件时：

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

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

但是您有机会以您想要的方式收集数据（数组或 url 除外），并且仍然可以通过参数访问插件功能。你有通过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)));
}

1. 过滤availableTags数组，对输入中的多个值进行特殊处理

2. 调用response函数显示过滤后的数组