Sometimes, we may run into the ‘this.source is not a function’ when we’re trying to add an autocomplete input with jQuery UI Autocomplete.
In this article, we’ll look at how to fix the ‘this.source is not a function’ when we’re trying to add an autocomplete input with jQuery UI Autocomplete.
Fix the jQuery UI Autocomplete ‘this.source is not a function’ Error
To fix the ‘this.source is not a function’ when we’re trying to add an autocomplete input with jQuery UI Autocomplete, we should pass in an object with the source property set to an array as the argument of the autocomplete method.
For instance, we write:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="tags">
to add the CSS link tag and script tags for the jQuery and jQuery UI libraries.
Then we add an input with the input tag.
Next, we turn the input into an autocomplete input with:
const fakedata = ['test1', 'test2', 'test3', 'test4', 'ietsanders'];
$("#tags").autocomplete({
source: fakedata
});
We call autocomplete with the source property set to fakeData to add the autocomplete entries and show them when we type in something that matches one or more of the fakedata entries.
Conclusion
To fix the ‘this.source is not a function’ when we’re trying to add an autocomplete input with jQuery UI Autocomplete, we should pass in an object with the source property set to an array as the argument of the autocomplete method.
