Migrate Richfaces suggestionbox to Primefaces autocomplete

Question

We have the following problem. We're migrating from Richfaces to Primefaces. Here is the code from the Richfaces implementation:

<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>

Until now I have the following in 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>

Now here comes the problem. Richfaces had a nice feature resp. attribute 'for' that nested the suggestionbox into the h:inputText. How can I do the same with Primefaces? Because both components on their onw work (i.e., the suggestion and redirection works as well as when entering something into the h:inputText and pressing enter) but I did not find a way to nest them as in Richfaces.

When using the autocomplete from Primefaces the selection via the entered input does not work, e.g.: User types something in 1 second and wants to press enter --> this is not possible and what we want to achieve.

Any help is highly appreciated.

Best regards

score 0 · Accepted Answer · answered Nov 04 '15 at 11:02

I found a solution (via JS and 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>

Migrate Richfaces suggestionbox to Primefaces autocomplete

1 Answers1