最简单的 EasyAutocomplete 示例不起作用

Question

我可能在做一些愚蠢的事情，当我看到答案时我会感到尴尬，但我无法让最简单的 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>

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

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

最简单的 EasyAutocomplete 示例不起作用

Simplest EasyAutocomplete example not working

javascript

jquery

easyautocomplete