Search code examples
javascriptjqueryeasyautocomplete

Simplest EasyAutocomplete example not working


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.


Solution

  • 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>