Ошибка автозаполнения jQueryUI: этот источник не является функцией

Question

Я пытаюсь реализовать функцию поиска в реальном времени, которая выполняет поиск по ключам в JSON, выбранном из API-интерфейса publi c, и для этого я использую Jquery UI, однако я получаю следующую ошибку: и я не уверен, как решить эту ошибку.

Uncaught TypeError: this.source не является функцией

<div class="live_search">
  <label for="search_player">Search a player </label>
  <input id="search_player">
</div>

var request = new XMLHttpRequest()
var data;

request.open('GET', 'https://cors-anywhere.herokuapp.com/https://fantasy.premierleague.com/api/bootstrap-static/', true)
request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    data = JSON.parse(this.response);
    $(function() {
      data;
      $("#search_player").autocomplete({
        source: data.elements.first_name
      });
    });
  }
  console.log(data);
}
request.send();

Есть идеи относительно причины этой ошибки?

Answer 1

Если вы проверите документацию для опции автозаполнения source, вы увидите, что проблема заключается в том, что вы предоставляете одно строковое значение.

При предоставлении строки это должен быть действительный URL, чтобы плагин мог сделать запрос к этой конечной точке, чтобы получить данные для заполнения элемента управления.

В качестве строки вы предоставление не является действительным URL или массивом, предполагается, что это функция. Следовательно, попытка вызвать строку, как если бы она была функцией, вызывает ошибку, которую вы видите.

Чтобы исправить это, вам нужно предоставить значение source в ожидаемом формате, как указано в приведенной выше ссылке на документацию. .

Кроме того, вы можете удалить обработчик событий document.ready, который вы определили в функции onload, поскольку он избыточен, а также одну строку с data;, поскольку он ничего не делает.