Submitting form by hitting ENTER event in primefaces p:autoComplete

Question

Below is my code:

<h:form>   
  <p:autoComplete id="autoCompleteID" value="#{myBean.item}"  
                       completeMethod="#{myBean.completeMethod}"    
  </p:autoComplete>
  <h:commandButton action="#{myBean.searchRelatedItems}"/>
</h:form>

Here my scenario is like standard Google search, I can see related Items in suggestion and also redirect another page based on text typed in p:autoComplete text field. Its works fine by click on Button, but I also want to achieve by hitting ENTER in p:autoComplete text field.

I've already seen the exact same question on SO and without an aswer as well... one workaround that doesn't work fully is to add "" to the form. If you press ESC to hide the autocomplete selection overlay you can then press enter to submit the form. This still is an issue though... — Lenymm, Dec 05 '15 at 15:18

score 1 · Answer 1 · edited May 23 '17 at 10:32

A late answer, but I will just leave it here...

Try using a Primefaces commandButton, it is p:commandButton, not h:commandButton.
Make sure the attribute type of the commandButton is "submit" and not "button", "submit" is the default in Primefaces.
Lastly a certain (but nasty I believe) solution is to put an id at the commandButton like "search-button" and an id at the h:form like "searchForm" and put the following at the p:autoComplete or h:form onkeyup="if (event.keyCode === 13) { document.getElementById('searchForm:search-button').click(); return false; }"

Similar topic: Submit form with primefaces widgets on enter

Submitting form by hitting ENTER event in primefaces p:autoComplete

1 Answers1

Linked