Combining twitter typeahead with JSF inputText

Combining twitter typeahead with JSF inputText

Snippet of HTML:
<h:panelGrid width="100%">
<h:outputText value="From:"></h:outputText>
<h:inputText id="departureAirport"
value="#{searchFlightsBean.departureAirport}"
styleClass="input-block-level blue-highlight" placeholder="Enter
departure city" required="true">
<f:validateLength minimum="3" maximum="20" />
</h:inputText>
<h:message for="departureAirport" styleClass="alert alert-error" />
</h:panelGrid>
I want to, eventually, pull data for this field via AJAX, and suggest
options to the user while he/she is typing.
I have included the following in my page:
<h:outputStylesheet name="css/bootstrap.css" />
<h:outputStylesheet name="css/main.css" />
<h:outputScript name="js/jquery-2.0.2.min.js" />
<h:outputScript name="js/bootstrap.js" />
<h:outputScript name="js/typeahead.js" />
and I have the following JS, which I'm using to test the autocompletion:
$(document).ready(function () {
$('#departureAirport').typeahead([ {
name: 'planets',
local: [ "Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn",
"Uranus", "Neptune" ]
}]);
});
The autocompletion is not working. Does anyone know why, exactly? I got
the typeahead example here, if anyone is interested.