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.

move your right before
tag
– Will Black May 12 '21 at 19:51 — Will Black, May 12 '21 at 19:51

score 0 · Accepted Answer · answered May 12 '21 at 21:16

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>

Simplest EasyAutocomplete example not working

1 Answers1