在 xpages 中使用 Typeahead.js 和 Bootstrap 3 不起作用

Using Typeahead.js with Bootstrap 3 in xpages not working

我正在尝试在 Xpage 中将 typeahead.js 功能与 bootstrap 3 结合使用。

我已将 Bootstrap 3 个文件、jQuery2.4.3 和 typeahead.js 包含在数据库 (webContent) 中,并将它们作为资源与输入 field/Editbox 一起包含并分配给它'typeahead' 的 class。

我正在使用 Mark Leusink to another separate issue Xpages: TypeAhead with Bootstrap 的回复中的示例。

查看下面我的 Xpage 代码:

    <xp:view xmlns:xp="http://www.ibm.com/xsp/core" >
    <xp:this.resources>
        <xp:styleSheet href="/bootstrap/css/bootstrap.min.css"></xp:styleSheet>
        <xp:styleSheet
            href="/bootstrap/css/typeahead.js-bootstrap.css">
        </xp:styleSheet>
        <xp:script src="/jquery/jquery-2.1.4.js"
            clientSide="true">
        </xp:script>
        <xp:script src="/bootstrap/js/bootstrap.js"
            clientSide="true">
        </xp:script>
        <xp:script src="/jquery/x$.js"
            clientSide="true">
        </xp:script>
        <xp:script src="/typeahead/typeahead.bundle.js"
            clientSide="true">
        </xp:script>
    </xp:this.resources>
    <xp:this.beforePageLoad>
        <![CDATA[#{javascript:viewScope.put("typeaheadOptions", toJson(["Alabama", "Alaska"]));}]]>
    </xp:this.beforePageLoad>

    <xp:inputText id="inputText1" autocomplete="off"
        styleClass="typeahead tt-query">

    </xp:inputText>

    <xp:scriptBlock id="scriptBlock1">
        <xp:this.value><![CDATA[var value = #{viewScope.typeaheadOptions};
x$('inputText1').typeahead({source: value });

    ]]></xp:this.value>
    </xp:scriptBlock>
</xp:view>

当我在输入字段中输入时,没有任何反应。我做错了什么?

谢谢

我现在可以使用这些项目。我相信这取决于我修改 JS 文件以禁用 AMD 加载程序的方式。当我重复修改原件并重新加载的过程时,它就起作用了。此外,我现在同意 david 和警告消息“主线程上的同步 XMLHttpRequest 可以忽略