using Jquery Auto Suggest on Contact Page of Website-CodePudding

I tried using a Jquery autocomplete plugin but I seem to be doing something wrong because It's not working. I have no coding experience just Html and Css. I added two input forms to see if the other would work. It might be the way I am using javascript I think, maybe I pasted it wrong?

Heres my code.



  <h1>Template</h1>
  <input id="basics" />
  
  <script>
  var options = {
    data: ["blue", "green", "pink", "red", "yellow"]
};

$("#basics").easyAutocomplete(options);
  </script>
  <p>This is a blank template for a web page.</p>
  <input id="basics" />

Thanks for any help. Ps this is the site i found it on. http://easyautocomplete.com/guide

CodePudding user response：

Consider the following example.

<body>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.css" integrity="sha512-PZ83szWxZ41zcHUPd7NSgLfQ3Plzd7YmN0CHwYMmbR7puc6V/ac5Mm0t8QcXLD7sV/0AuKXectoLvjkQUdIz9g==" crossorigin="anonymous" referrerpolicy="no-referrer"
    />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.js" integrity="sha512-e06Qwihs/3S1eUpBj0Wbn7fB3V6BlKh2BSPWL//P0Q3QLboc618BYi3HUXtG1K8zMGoXyL12JtY805oAhYkNLw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
      $(function() {
        var options = {
          data: ["blue", "green", "pink", "red", "yellow"]
        };

        $("#basics").easyAutocomplete(options);
      });
    </script>
  </head>

  <h1>Template</h1>
  <p>This is a blank template for a web page.</p>
  <input id="basics" />
</body>

When I test the example, it is working as expected. I was unable to replicate the issue. I suspect the Library Order you are using is incorrect. Jquery must be loaded first and then additional libraries.