jsf - 将 twitter typeahead 与 JSF inputText 相结合

Question

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" ]
  }]);
});

自动完成功能不起作用。有谁知道为什么，确切地说？如果有人感兴趣，我在这里得到了预先输入的示例。

Answer 1

似乎 JSF 和 twitter-bootstrap 不能很好地配合使用。我让它与一个正常的输入字段一起工作。