Question

在AEM中创建了一个简单的搜索组件，并在其JSP中添加了以下代码。还在clientlib节点中添加了autocomplete插件和jquery plyugin文件。但是获得错误＆＃34;自动完成不是一个功能＆＃34;每次我尝试使用此组件运行页面。与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>

Answer 1

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

您的文档头部中有一个JS脚本标记。（这是立即解析和执行）
文档外有curl_close($curl); $result = json_decode($jsonResponse, true); echo $result['item1']; //Echo item 1.个。我不相信HTML5行为定义了它应该如何表现。
没有定义onLoad的jQuery文档，因此浏览器会在构建任何DOM之前尝试运行JavaScript。

我建议：

尝试移动头部内的cq:includeClientLib。
使用HTML5 doctype cq:includeClientLib。这应该＆＃34;踢＆＃34;浏览器进入一致的解析模式（特别是避免了IE的无数怪癖模式）。
将脚本块移动到正文末尾。更好的是，用一个onload处理程序包装JS，以使JS在解析HTML之后运行。 DOM已经建成。

Answer 2

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

clientlibs.min.js：未捕获TypeError：$（...）。autocomplete不是函数

2 个答案: