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

自动完成不正常工作。有谁知道为什么，确切地说？如果有人感兴趣的话，我得到了先行示例here。

Answer 1

似乎JSF和twitter-bootstrap并不能很好地协同工作。我使用了noraml输入字段。

将twitter typeahead与JSF inputText结合使用

1 个答案: