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>
最終的には、AJAX を介してこのフィールドのデータを取得し、ユーザーが入力しているときにオプションを提案したいと考えています。
私は私のページに以下を含めました:
<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-typeahead.js" />
そして、オートコンプリートをテストするために使用している次の JS があります。
$(document).ready(function () {
$('#departureAirport').typeahead([ {
name: 'planets',
local: [ "Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune" ]
}]);
});
オートコンプリートが機能していません。正確に理由を知っている人はいますか?誰かが興味を持っている場合は、ここで先行入力の例を入手しました。