Board index JavaServer Faces General Auto completion and items formatting

Auto completion and items formatting

Components, Ajax Framework, Utilities and More.

Posts: 3

I'm new to PrimeFaces and I was playing around a little bit with the auto completion control. Everything works fine (using JSF 2.0, if this matters) except one thing: I want the auto suggestion result list to be formatted in a certain way but want another formatting to be used in the actual input box when the user clicks the item.

Take this example:


I tried to use the "itemLabel" attribute to format the suggestion list which works but when the user clicks on the item the whole HTML code is placed in the input field. However, I only want the name of the item ("Gardening" in the example above) to be transferred to the input control.

Is there any way to achieve this with the autocompletion control?

Thanks & Regards

Posts: 16902
Location: Cybertron

Yes it is possible with client side api, p:autoComplete is built on top of YUI autocomplete.

Here's an example; ... yless.html

Posts: 3
cagatay.civici wrote:
Yes it is possible with client side api, p:autoComplete is built on top of YUI autocomplete.

I was afraid you would say this. ;) My only problem is that I'm not that a JavaScript guru and I've never worked with YUI. So I have no idea of how to integrate the example in JSF. Could you give me a pointer of how to integrate this in your AutoComplete Pojo example?

Let's assume I want that number (what every this is) you pass to the "Player" constructor to be appended to the players' name in the suggestion list. For example when typing "Mes" the suggestion list would contain a single item called "Messi (10)".

Thanks in advance

Posts: 16902
Location: Cybertron

No problem, actually I'm thinking to add this feature to p:autoComplete, so autocomplete will provide built-in support to custom formatting like;

<p:autoComplete value="#{autoCompleteBean.selectedPlayer}" completeMethod="#{autoCompleteBean.completePlayer}"
         var="player" itemValue="#{player}" converter="player">
     <p:graphicImage value="#{player.image}" />
     <h:outputText value="#{}" />

So whatever inside the autocomplete would be used as suggestion, you can place whatever content here. Looks like a nice future enhancement.

Posts: 3
cagatay.civici wrote:
Looks like a nice future enhancement.

So this example doesn't work yet, right? But then, can you give me an example of how to do this with the current PrimeFaces release?

Posts: 16902
Location: Cybertron

No, it's the design of what's coming soon I've posted.

I can't provide the whole solution due to lack of time but can only suggest pointers like the example in YUI page.

For now you can use the current p:autoComplete regularly and change it when we add this feature in next version if it's not that urgent.

If it is urgent, you can consider the enterprise support option, in that case we can add this feature in 1-2 days.

Posts: 1
Location: Novi Sad, Serbia

Hi everyone,

I found this topic and I'm very interested in new feature of p:autocomplete component.
It's much easier to use built-in formating for items.

Have you done this feature?
If you do, can you give as some example.


Return to General