Primefaces autocomplete enter key behavior

Question

when we type into autoComplete, primefaces automatically highlighted first shown item. so when we press enter key that item will be selected. how can i change the behavior of enter key, so when it pressed, just entered text be submitted in backing bean property. I know we can hit ESC button then continue but but user don't like it.

I am using primefaces 5.0 & jsf 2.1.11

This is a link to old source. Latest is in github. Please correct that. And the 5.0 source is even older and so trunk xan not be a good replacement — Kukeltje, Dec 09 '15 at 07:33

score 3 · Answer 1 · answered Aug 22 '17 at 11:20

What helped me to solve the same issue where the answers here and here. Basically, you have to override 2 different behaviours.

First one is the default selection of the first result, that can be achieved adding this to your autocomplete (as stated by the accepted answer in the first link, available in primefaces for versions 5.1.5, 5.0.14 and 5.2):

autoHighlight="false"

The second thing you want to override is the behaviour when Enter is pressed, as you want the form that contains the autocomplete to be submitted. For doing so, just add this code to either the containing form or the autocomplete:

onkeyup="if (event.keyCode == 13) {  
    document.getElementById('[searchFormId]:[submitButtonId]').click();
    return false; }"

Change the ids between square brackets for your own ones and it's done.

PS: I know this is a rather old question but it still applies to the current version of primefaces (6.1 when this question was answered). And I also think it can help to have both changes combined in one answer.

score 0 · Answer 2 · answered Dec 09 '15 at 01:02

Truth be told, this feels like a bug. Richfaces do that implicitly (submit on enter while suggesting). I haven't found an official fix so I did some research and turns out the simplest way is to override the JS function that resolves key presses. The whole autocomplete js is here. You just need to override the bindKeyEvents function so you declare it likewise:

PrimeFaces.widget.AutoComplete.prototype.bindKeyEvents = function () {

Then add the rest of the code for this specific function from the JS I mentioned before. I've omitted that code so it's more readable. Then you want to find a switch that resolves different keys that have some behavior mapped to them. And under the code:

case keyCode.ENTER:
case keyCode.NUMPAD_ENTER:

Add something like:

if (highlightedItem.length == 0) {
    document.getElementById("<your_form_id>").click();
    _self.hide();
} else {
    highlightedItem.click();
}

Also, make sure that you got forceSelection and the autohighlight off on the autocomplete component.

The problem in the JS is that even though you haven't selected any item from the suggestions it still triggers the event that tries to click the item... which doesn't even exist.

This is the simplest way as I said... you can also create your own autocomplete implementation and override the behavior there. But that's a lot of work and if you only need this one feature I suggest overriding the JS function.

In order to override the original JS with your custom one you need to make sure yours is loaded after the original one. To do that you can either use h:outputScript or simply just load the javascript like you're used to... but in the body (not the head).

Also there's probably a fancier way than having to specify the form id. But I just wasted too much time searching for a solution that I had to get it done real fast.

Primefaces autocomplete enter key behavior

2 Answers2