I am trying to use the typeahead.js functionality with bootstrap 3 in an Xpage.
I have included the Bootstrap 3 files, jQuery2.4.3 and typeahead.js in the database( webContent) and included them as resources along with the input field/Editbox and assigned it with the class of 'typeahead'.
I am using an example from a response by Mark Leusink to another separate issue Xpages: TypeAhead with Bootstrap.
See my Xpage code below:
<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>
When I type in the input field nothing happens. What am I doing wrong?
Thanks
I have these Items working now. I beleive it was down to the way I modified the JS files to disable the AMD loader. When I repeated the processes of modifying the originals and reloaded and it worked. Also I now agree with david and the warning message 'Synchronous XMLHttpRequest on the main thread can be ignored