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

Question

I am trying to implement a live search function which searches through keys in a JSON fetched from a public api and I am using Jquery UI in order to do so however I am getting the following error, and I am not sure how to solve this error.

Uncaught TypeError: this.source is not a function

<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();

Any ideas as to what is causing this error?

Answer 1

If you check the documentation for the autocomplete source option you can see the issue is because you're providing a single string value.

When providing a string it needs to be a valid URL so that the plugin can make a request to that endpoint to retrieve the data to fill the control with.

As the string you're providing is not a valid URL or an array, it's assumed that it's a function. Hence trying to invoke a string as though it's a function causes the error you see.

To fix this you need to provide a value to source in a format that it expects, as outlined by the documentation link above.

In addition, you can remove the document.ready event handler you define in the onload function, as it's redundant, and also the single line with data; as it doesn't do anything.