最简单的 EasyAutocomplete 示例不起作用答案

【问题标题】：Simplest EasyAutocomplete example not working最简单的 EasyAutocomplete 示例不起作用
【发布时间】：2021-05-13 05:16:47
【问题描述】：

我可能在做一些愚蠢的事情，当我看到答案时我会感到尴尬，但我无法让 EasyAutocomplete 的最简单示例起作用。这是我的完整代码，基于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>

这是从本地文件而不是 Web 服务器运行的。我已经验证浏览器可以加载所有脚本和css文件，并且没有错误。但是当我在该字段中输入时没有任何反应。 EasyAutocomplete 版本是 1.3.5。

【问题讨论】：

将你的移到

标签： javascript jquery easyautocomplete

【解决方案1】：

问题是缺少easyAutocomplete 脚本块$(document).ready()。引用 jQuery 文档，“在文档“准备就绪”之前，无法安全地操作页面。jQuery 会为您检测到这种准备状态。包含在 $(document).ready() 中的代码只会在页面文档对象模型 (DOM) 中运行一次已准备好执行 JavaScript 代码。”

完整的工作示例如下。我还更新到了更新的 jQuery 版本，但这并不影响功能。

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

【讨论】：