Jquery ui autocomplete error not a function

Question

I want to use the autocomplete function of jquery ui but I have a problem.

I use the external library of google:

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

< script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" > < /script>

My autocomplete script

$("#search").autocomplete({
  source: 'autocomplete-search.php',
});

I have this error:

jQuery.Deferred exception: $(...).autocomplete is not a function TypeError: $(...).autocomplete is not a function

at HTMLDocument. (http://localhost/sitename/script.js:382:16) at j (https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:29948) at k (https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:30262) >undefined

user7271783 · Accepted Answer · 2017-08-12 11:41:14Z

1

you also need to include JQuery itself into your project, before the jquery-ui include. To be able to parse this,

$("#search")

, JQuery itself is required. Try including this from google, before your other script.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

answered Aug 12, 2017 at 11:41

user7271783

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

7 Comments

user7271783 Over a year ago

Also, the jquery-ui.min.js file itself has JQuery in it, so the main JQuery file is necessary. JQuery-UI is just an extension. :)

Dilak Over a year ago

That's the problem because I have already included JQuery. So I really don't know why it is not working

user7271783 Over a year ago

I was able to recreate the problem, but only when I select the ACTUAL DOM element itself and not the JQuery element. Such as document.getElementById('search').autocomplete() or $('search')[0].autocomplete() . But it seems you are selecting it the right way so I'm not sure what is happening. A couple things for you to try: wrap the autocomplete function in $(document).ready(function(){ }); or pre-select jquery element: var search = $('#search'); search.autocomplete(....); That's kinda all I can think of.

user7271783 Over a year ago

And be sure to include the actual jquery file before the jquery-ui file. The order is important

user7271783 Over a year ago

Below is my exact file working. If that doesn't work then it's something other than the code for sure. Try clearing your browser's cache for one, or using a different browser. <!DOCTYPE html> <html> <head> <script src="ajax.googleapis.com/ajax/libs/jquery/3.1.1/…> <script src="ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/…> </head> <body> <input id="search" type="text"/> <script> $('#search').autocomplete({ source : 'autocomplete-search.php' }); </script> </body> </html>

|

Collectives™ on Stack Overflow

Jquery ui autocomplete error not a function

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related