究竟是什么来源回调的请求对象？ [英] What is the request object exactly of the source callback?

问题描述

自动完成功能的源代码的回调需要一个请求和响应对象作为参数。我找不到什么这些对象excatly是他们定义什么属性和方法的任何有用的信息。

解决方案

我想了解什么是函数（请求，响应）的最佳方法{...} 是要经过插件本身的来源$ C ​​$ C。

我会尝试尽可能清楚，告诉我，如果你需要了解更多信息或解释。

1。什么是源

当你输入输入一些值，插件执行搜索，通过私有方法_search

  _search：函数（值）{
    this.pending ++;
    this.element.addClass（UI-自动完成装载）;    this.source（{项：值}，this.response）;
}
 

阅读的最后一行，就可以看到该插件，预计在源属性是的功能使它执行作为传递

• 要求：一个对象字面有一个属性词将包含什么被输入进




• 响应：插件属性响应。这个属性是由缺省调用私有方法_response，这是负责显示在菜单中，过滤列表中，关闭菜单等
  
  

的函数

---

2。使用源选项

但阅读文档时，源选项接受一个数组或用于远程获取值的网址...它是如何工作的呢？

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

  _initSource：功能（）{
    VAR自我=这一点，
        阵，网址;
    如果（$ .isArray（this.options.source））{
        阵列= this.options.source;
        this.source =功能（请求，响应）{
            响应（$ ui.autocomplete.filter（数组，request.term））;
        };
    }否则如果（typeof运算this.options.source ===字符串）{
        URL = this.options.source;
        this.source =功能（请求，响应）{
            如果（self.xhr）{
                self.xhr.abort（）;
            }
            self.xhr = $阿贾克斯（{
                网址：网址，
                数据：要求，
                数据类型：JSON
                autocompleteRequest：++ requestIndex，
                成功：功能（数据，状态）{
                    如果（this.autocompleteRequest === requestIndex）{
                        响应（数据）;
                    }
                }，
                错误：函数（）{
                    如果（this.autocompleteRequest === requestIndex）{
                        响应（[]）;
                    }
                }
            }）;
        };
    }其他{
        this.source = this.options.source;
    }
}，
 

您可以看到，在这两种情况下，插件最终确定 this.source 为函数（请求，响应）{...}

• 如果您提供一个数组，它执行响应方法来显示菜单使用经过滤波阵列 request.term ：

    this.source =功能（请求，响应）{
      响应（$ ui.autocomplete.filter（数组，request.term））;
  }
   




• 如果您提供的网址，它使Ajax请求并在成功执行响应方法来显示返回数据：

   成功：功能（数据，状态）{
      如果（this.autocompleteRequest === requestIndex）{
          响应（数据）;
      }
  }，
   




• 否则，它使用所提供的期权价值，因为它是

---

3。当传递函数（请求，响应）为源选项值

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

  $（...）。自动完成（{
    源：功能（请求，响应）{...}
}）;
 

您实际上是不提供插件的任何数据！

但是，你有机会来收集数据，你所希望的方式（其他一个数组或URL），而且还有通过参数访问插件functionnality。你必须通过 request.term 输入的内容，你可以执行响应回调来显示结果。

示例？自动完成演示页...

如果你去自动完成演示页多个值，则jQuery UI的团队使用此functionnality。

中的数据被存储在一个JavaScript数组 VAR availableTags = [];

和它们定义了源选择这种方式：

 来源：功能（请求，响应）{
    //后向委托自动完成，但提取的最后一届
    （$ ui.autocomplete.filter（availableTags，extractLast（request.term）））的反应;
}
 

1. 与输入处理多个值的特殊处理过滤 availableTags 阵列




2. 致电响应函数来显示过滤阵列

The Source callback of the autocomplete function takes an request and a response object as parameters. I couldn't find any useful information for what these object excatly are and what properties and methods they define.

解决方案

I think the best way to understand what is function(request, response) {...} is to go through the source code of the plugin itself.

I'll try to be as clear as possible, tell me if you need more details or explanations.

1. What is "source"

When you enter some value in the input, the plugin executes a "search" through the private method "_search"

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

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

Reading the last line, you can see the plugin expects the "source" property to be a function that it executes passing as

• request: an object-literal with one property term which will contain what was entered in the input

• response: the plugin property response. This property is a function that by default calls the private method "_response" which is responsible for showing the menu, filtering the list, closing the menu etc.
  
  

---

2. Using the "source" option

But reading the documentation, the source option accepts an array or an url for remotely getting the values... so how does this work ?

The plugin initialize this.source through the private method _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;
    }
},

You can see that in both cases the plugin ends up defining this.source as function(request, response) {...}

• if you provide an array, it executes the response method to display the menu passing a filtered array using request.term:

  this.source = function(request, response) {
      response($.ui.autocomplete.filter(array, request.term));
  }
  

• if you provide an url, it makes the ajax request and upon success, executes the response method to display the returned data:

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

• otherwise, it uses the provided option value as it is

---

3. When passing a function(request, response) as "source" option value

So when you call the plugin this way:

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

You're actually not providing the plugin with any data !

But you have the opportunity to gather the data the way you want (other that an array or an url), and still have access to the plugin functionnality through the parameters. You have the input content through request.term and you can execute the response callback to display the results.

Example ? The Autocomplete demo pages...

If you go to the Autocomplete Multiple values demo page, the jquery ui team uses this functionnality.

The data is stored in a javascript array var availableTags = [...];

And they define the source option this way:

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

1. Filter the availableTags array with a special treatment for handling multiple values in input

2. call the response function to display the filtered array

这篇关于究竟是什么来源回调的请求对象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！