clientlibs.min.js：未捕获的 TypeError：$(...).autocomplete 不是函数答案

【问题标题】：clientlibs.min.js: Uncaught TypeError: $(...).autocomplete is not a functionclientlibs.min.js：未捕获的 TypeError：$(...).autocomplete 不是函数
【发布时间】：2016-10-08 17:22:11
【问题描述】：

在 AEM 中创建了一个简单的搜索组件，并在其 JSP 中添加了以下代码。还在 clientlib 节点中添加了自动完成插件和 jquery plyugin 文件。但是每次我尝试使用此组件运行页面时都会出现错误“自动完成不是功能”。不兼容与 AEM 一起使用吗？使用 AEM 6.0 SP2

<% @include file="/libs/foundation/global.jsp"%>
<cq:includeClientLib categories="jquerysamples" />

<html>
<head>
<script>
$(function() {
            var availableTutorials = [
               "ActionScript",
               "Boostrap",
               "C",
               "C++",
            ];
            $( "#searchInput" ).autocomplete({
               source: availableTutorials
            });
         });
</script>
</head>
<body>
    <div class="formDiv">
        <form id="form" >
            <input type="text" id="searchInput" name="searchbox">
            <div id="searchResults"/>
        </form>
    </div>
</body>
</html>

【问题讨论】：

标签： autocomplete aem jquery-ui-autocomplete

【解决方案1】：

我建议了解浏览器如何解析 HTML 文档。 http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#HTML_Parser 是介绍性资源。

您的文档头部有一个 JS 脚本标签。（这是立即解析和执行）
文档外有一个cq:includeClientLib。我不相信 HTML5 行为定义了它的行为方式。
没有定义 jQuery 文档 onLoad，因此浏览器会在构建任何 DOM 之前尝试运行 JavaScript。

我推荐：

尝试将cq:includeClientLib 移动到头部。
使用 HTML5 文档类型<!doctype html>。这应该将浏览器“踢”到一致的解析模式（尤其是避免 IE 的各种怪癖模式）。
将脚本块移动到正文末尾的内部。更好的是，使用 onload 处理程序包装 JS，以使 JS 在解析 HTML 并构建 DOM 之后运行。

【讨论】：

或者，stackoverflow.com/questions/36455911/… 回答相同的基本问题，但来自 AEM/JSP 之外。

【解决方案2】：

我得到了解决方案。它没有绑定 jquery-ui 插件。我将插件文件夹的“cq：includeClientLib”依赖项添加到我用于自动完成的js文件中。它现在就像一个魅力。

【讨论】：