Javascript 最简单的EasyAutocomplete示例不起作用_Javascript_Jquery_Easyautocomplete

Javascript 最简单的EasyAutocomplete示例不起作用

javascript jquery

Javascript 最简单的EasyAutocomplete示例不起作用,javascript,jquery,easyautocomplete,Javascript,Jquery,Easyautocomplete,我可能在做一些愚蠢的事情，当我看到答案时，我会感到尴尬，但我无法获得EasyAutocomplete的最简单示例。以下是我的完整代码，基于以下“基础”示例：变量选项={ 数据：[“蓝色”、“绿色”、“粉色”、“红色”、“黄色”] }; $（“#基础”）.easyAutocomplete（选项）；搜寻这是从本地文件而不是web服务器运行的。我已经验证了浏览器可以加载所有脚本和css文件，并且没有错误。但当我在字段中键入时，什么也没有发生。EasyAutocomplete版本是1.3.5。

我可能在做一些愚蠢的事情，当我看到答案时，我会感到尴尬，但我无法获得EasyAutocomplete的最简单示例。以下是我的完整代码，基于以下“基础”示例：


变量选项={
数据：[“蓝色”、“绿色”、“粉色”、“红色”、“黄色”]
};
$（“#基础”）.easyAutocomplete（选项）；
搜寻

这是从本地文件而不是web服务器运行的。我已经验证了浏览器可以加载所有脚本和css文件，并且没有错误。但当我在字段中键入时，什么也没有发生。EasyAutocomplete版本是1.3.5。

问题是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>


$（文档）.ready（函数（）{
变量选项={
数据：[“蓝色”、“绿色”、“粉色”、“红色”、“黄色”]
};
$（“#基础”）.easyAutocomplete（选项）；
});
搜寻

移动您的。。。就在标签前面

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