CODEWITHSUNDEEP
javascriptjqueryautocompleteeasyautocomplete
Proteeti Prova
Proteeti Prova

Reputation: 1169

TypeError: $(...).easyAutocomplete is not a function

I am trying to follow jquery easyAutocomplete docs and getting this error. I know this is a very common question and there have been asked a handful in SO. But none of them seems to erase my error. Here is my code

test.js

var options = {
  url: "places.json",
  getValue: "name",

  list: {
    match: {
      enabled: true
    }
  },

  theme: "square"
};

$("#textbox").easyAutocomplete(options);

html 

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>test</title>

    <link
      rel="stylesheet"
      href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"
    />
  </head>
  <body>
    <div>
      Location: <br />
      <br />
      <input type="text" name="enterlocation" id="textbox" />
      <button>enter</button>
    </div>
  </body>

  <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
  <script async src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script src="test.js"></script>
</html>

json:

[
  { "name": "Afghanistan", "code": "AF" },
  { "name": "Aland Islands", "code": "AX" },
  { "name": "Albania", "code": "AL" },
  { "name": "Algeria", "code": "DZ" },
  { "name": "American Samoa", "code": "AS" }
]

Upvotes: 0

Views: 882

Answers (1)

Ouroborus
Ouroborus

Reputation: 16894

In the EasyAutocomplete guide, it says:

In order to use EasyAutocomplete, add these files in header section of your page.

<!-- JS file -->
<script src="path/to/jquery.easy-autocomplete.min.js"></script> 

<!-- CSS file -->
<link rel="stylesheet" href="path/to/easy-autocomplete.min.css"> 

<!-- Additional CSS Themes file - not required-->
<link rel="stylesheet" href="path/to/easy-autocomplete.themes.min.css">

Remember to include jQuery file. You can download library from the jQuery website. Best practice is to use CDN server:

<!-- Using jQuery with a CDN -->
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

Based on this, you'll need to include jquery.easy-autocomplete.min.js after jQuery and before your own code. You should also include easy-autocomplete.min.css.

Upvotes: 1

Related Questions