Simplest EasyAutocomplete example not working
Question
I'm probably doing something dumb and I will be embarrassed when I see the answer, but I cannot get the simplest example of EasyAutocomplete to work. Here is my complete code, based on the "Basics" example at http://easyautocomplete.com/guide :
<head>
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- JS file -->
<script src="jquery.easy-autocomplete.min.js"></script>
<!-- CSS file -->
<link rel="stylesheet" href="easy-autocomplete.min.css">
<script>
var options = {
data: ["blue", "green", "pink", "red", "yellow"]
};
$("#basics").easyAutocomplete(options);
</script>
</head>
<body>
<h2>Search</h2>
<input id="basics" />
</body>
This is running from a local file, not a web server. I have verified that the browser can load all script and css files, and there are no errors. But nothing happens when I type in the field. The EasyAutocomplete version is 1.3.5.
1 answers
solution1
0 ACCPTED 2021-05-12 21:16:47
The problem was that the easyAutocomplete script block was missing $(document).ready() . To quote the jQuery documentation, "A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $(document).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute."
The complete working example is below. I also updated to a more recent jQuery version, but that does not affect the functionality.
<head>
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- JS file -->
<script src="jquery.easy-autocomplete.min.js"></script>
<!-- CSS file -->
<link rel="stylesheet" href="easy-autocomplete.min.css">
<script>
$(document).ready(function() {
var options = {
data: ["blue", "green", "pink", "red", "yellow"]
};
$("#basics").easyAutocomplete(options);
});
</script>
</head>
<body>
<h2>Search</h2>
<input id="basics" />
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.