Romain Romain - 3 months ago 12
jQuery Question

Errors with basic EasyComplete input

Trying to include the EasyComplete plugin (version 1.3.5) to my future website, I have tested it with the most simple input tag (the 'basics' one) with no success ... I do not see any autcomplete list while typing letters in my input tag.

Here is my html file:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./EasyAutocomplete/easy-autocomplete.min.css">
<link rel="stylesheet" href="./EasyAutocomplete/easy-autocomplete.themes.min.css">
<script src="./EasyAutocomplete/jquery.easy-autocomplete.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<input id="basics" />
<script>
$(document).ready(function() {
var options = {
data: ["blue", "green", "pink", "red", "yellow"]
};
$("#basics").easyAutocomplete(options);
});
</script>
</body>
</html>


I have noticed, using Safari Web Inspector, that my page has 2 issues:

_ 1 from the html file: '$("#basics").easyAutocomplete(options); is not a function'

_ 1 from the jquery.easy-autocomplete.min.js file: 'Can't find variable jQuery' (last line)

Coud anyone explain me what I'm doing wrong with this very basic example ?

Answer

Your JavaScript includes are in the wrong order. You need to include jQuery first, then your autocomplete stuff.

Here's a demo of your code with the includes in the correct order:

$(document).ready(function() {
   var options = {
     data: ["blue", "green", "pink", "red", "yellow"]
   };
   $("#basics").easyAutocomplete(options);
 });
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.themes.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.min.js"></script>

<input id="basics">