jQueryUI 自动完成错误：this.source 不是函数

Question

我正在尝试实现一个实时搜索功能，该功能搜索从公共 api 获取的 JSON 中的键，并且我正在使用 Jquery UI 来执行此操作，但是我收到以下错误，并且我不确定如何解决此错误。

未捕获的类型错误：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;因为它不执行任何操作。