Borislav Hadzhiev
Last updated: Oct 19, 2021
Check out my new book
The "$(...).autocomplete is not a function" jQuery error occurs for multiple reasons:
To solve the "$(...).autocomplete is not a function" jQuery error, make sure to load the jQuery library before loading the jQuery UI library. The libraries have to be loaded only once on the page, otherwise the error is thrown.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <!-- ✅ Load CSS file for jQuery ui --> <link href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css" rel="stylesheet" /> </head> <body> <div class="ui-widget"> <label for="tags">Tags: </label> <input id="tags" /> </div> <!-- ✅ load jQuery ✅ --> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" ></script> <!-- ✅ load jQuery UI ✅ --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer" ></script> <script src="index.js"></script> </body> </html>
The order the scripts are loaded in is very important. We loaded the scripts in the following order:
index.js
fileHere's the code for the index.js
file.
$(document).ready(function () { $(function () { var availableTags = [ 'ActionScript', 'AppleScript', 'Asp', 'BASIC', 'C', 'C++', 'Clojure', 'COBOL', 'ColdFusion', 'Erlang', 'Fortran', 'Groovy', 'Haskell', 'Java', 'JavaScript', 'Lisp', 'Perl', 'PHP', 'Python', 'Ruby', 'Scala', 'Scheme', ]; $('#tags').autocomplete({ source: availableTags, }); }); });
If you open the page you will see an input field with working autocomplete.
Loading the jQuery library twice re-runs the initialization and causes the error.
Specifying an incorrect path when loading a script is the same as not loading the script at all and leads to the error.
You can check if you're loading the libraries correctly by opening the console in your browser.
If you see any 404 errors related to the jQuery and jQuery UI scripts, then the path is specified incorrectly.