将Richfaces建议框迁移到Primefaces自动完成

时间:2015-11-02 14:32:00

标签: primefaces autocomplete richfaces search-suggestion

我们有以下问题。我们正在从Richfaces迁移到Primefaces。以下是Richfaces实现的代码:

<h:panelGrid
  columns="3"
  cellspacing="0"
  cellpadding="0">
  <h:inputText
    id="inpID"
    converter="inpConverter"
    value="#{session.a}"
    valueChangeListener="#{session.sthChanged}"
    onfocus="someFunctionA();"
    onblur="someFunctionB();" />

  <h:commandLink
    action="#{session.redirectToSite()}"
    styleClass="targetButton align-middle" />

  <rich:suggestionbox
    id="inpSuggest"
    for="inpID"
    frequency="1"
    minChars="0"
    var="result"
    status="noStatus"
    fetchValue="#{result}"
    suggestionAction="#{manager.autocomplete}">
    <a4j:ajax
      event="select"
      listener="#{session.setSthAndRedirect(result)}"
      execute="@this" />
    <f:facet name="nothingLabel">
      <h:outputText value="No match found!" />
    </f:facet>
    <h:column>
      <h:outputText value="#{result.x}" />
    </h:column>
  </rich:suggestionbox>
</h:panelGrid>

到目前为止,我在Primefaces中有以下内容:

<h:panelGrid
  columns="3"
  cellspacing="0"
  cellpadding="0">
  <h:inputText
    id="inpID"
    converter="inpConverter"
    value="#{session.a}"
    valueChangeListener="#{session.sthChanged}"
    onfocus="someFunctionA();"
    onblur="someFunctionB();" />

  <h:commandLink
    action="#{session.redirectToSite()}"
    styleClass="targetButton align-middle" />

  <p:autoComplete
    id="inpSuggest"
    placeholder="#{session.a}"
    completeMethod="#{manager.autocomplete}"
    var="result"
    itemValue="#{result}"
    queryDelay="4000"
    emptyMessage="No match found!"
    converter="inpConverter">
    <p:ajax
      event="itemSelect"
      listener="#{session.setSthAndRedirect}" />
    <p:column>
      <h:outputText value="#{result.x}" />
    </p:column>
    <s:convertEntity />
  </p:autoComplete>
</h:panelGrid>

现在问题来了。 Richfaces有一个很好的功能。属性&#39; for&#39;将suggestionbox嵌套到h:inputText中。如何使用Primefaces做同样的事情? 因为它们onw上的两个组件都工作(即建议和重定向以及在输入h:inputText并按Enter键时),但我没有找到像Richfaces那样嵌套它们的方法。

使用Primefaces的自动完成功能时,通过输入的输入选择不起作用,例如: 用户在1秒内键入内容并想按Enter键 - >这是不可能的,也是我们想要实现的目标。

非常感谢任何帮助。

祝你好运

1 个答案:

答案 0 :(得分:0)

我找到了一个解决方案(通过JS和p:remoteCommand):

 <p:autoComplete
   [...]
   onkeyup="doSomething(event);"
   [...] >
   [...]
 </p:autoComplete>

<p:remoteCommand
   name="doRemote"
   immediate="true"
   actionListener="#{session.doIt}"
   style="display: none;" />

<script type="text/javascript">
  function doSomething(e) {
    var val = document.getElementById("someId");
    e = e || window.event;
    if(e.keyCode == 13) {
      doRemote([{name:'enteredValue', value:val.value}]);
      return false;
    } else {
      return true;
    }
  }
</script>