Solve - $(...).autocomplete is not a function jQuery Error

Solve - $(...).autocomplete is not a function #

The "$(...).autocomplete is not a function" jQuery error occurs for multiple reasons:

Forgetting to include the jQuery UI library.
Loading the jQuery UI library before the jQuery library.
Loading the jQuery library twice.
Specifying an incorrect path to the jQuery files.

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.

index.html

Copied!
<!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:

jQuery UI css stylesheet
jQuery library
jQuery UI library
our own index.js file

Here's the code for the index.js file.

index.js

Copied!
$(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.

The error most commonly occurs if you forget to load the jQuery UI library or load the jQuery library twice.

Loading the jQuery library twice re-runs the initialization and causes the error.

If you're loading the libraries from files on your local file system, make sure that you're specifying the correct path.

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.

Solve - $(...).autocomplete is not a function jQuery Error

Solve - $(...).autocomplete is not a function #

Borislav Hadzhiev