Что такое объект запроса в точности от источника обратного вызова?

Question

Обратный вызов источника функции автозаполнения принимает запрос и объект ответа в качестве параметров.Я не смог найти никакой полезной информации о том, что это за объект и какие свойства и методы они определяют.

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 для удаленного получения значений ... так как это работает?

Плагин инициализирует 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));
  }
  

• если вы предоставите URL-адрес, он отправляет запрос ajax и при успешном выполнении выполняет метод response для отображения возвращенного data:

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

• в противном случае он использует предоставленное значение параметра как

---

3. При передаче функции (запроса, ответа) в качестве значения параметра «источник»

Итак, когда вы вызываете плагин так:

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

Вы фактически не предоставляете плагину никаких данных!

Но у вас есть возможность собирать данные так, как вы хотите (кроме массива или URL), и при этом иметь доступ к функциональности плагина через параметры. У вас есть входной контент через request.term, и вы можете выполнить обратный вызов response для отображения результатов.

Пример? Демонстрационные страницы автозаполнения ...

Если вы перейдете на демонстрационную страницу Автозаполнение нескольких значений , команда 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 для отображения отфильтрованного массива