jQueryUI Autocomplete error: this.source is not a function

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?

Rory McCrossan · Accepted Answer · 2020-03-06 16:16:54Z

2

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.

answered Mar 6, 2020 at 16:16

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sahil Chabria ramchandani Over a year ago

So do i put source : "url of the json" ?

Rory McCrossan Over a year ago

Assuming it's in the right format for Datatables to parse, yes

Sahil Chabria ramchandani Over a year ago

I am not using datatables though, im using Jquery UI

Rory McCrossan Over a year ago

Sorry, I meant Autocomplete :) No idea why I wrote Datatables there

Collectives™ on Stack Overflow

jQueryUI Autocomplete error: this.source is not a function

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related