Auto completion and items formatting

Components, Ajax Framework, Utilities and More.
Post Reply
manski
Posts: 3
Joined: 03 Feb 2010, 12:56

03 Feb 2010, 13:05

Hi,

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:

Image

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
Sebastian

User avatar
optimus.prime
Prime
Posts: 17556
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

03 Feb 2010, 15:56

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

Here's an example;

http://developer.yahoo.com/yui/examples ... yless.html

manski
Posts: 3
Joined: 03 Feb 2010, 12:56

03 Feb 2010, 16:28

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

User avatar
optimus.prime
Prime
Posts: 17556
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

03 Feb 2010, 17:03

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

Code: Select all

<p:autoComplete value="#{autoCompleteBean.selectedPlayer}" completeMethod="#{autoCompleteBean.completePlayer}"
			var="player" itemValue="#{player}" converter="player">
     <p:graphicImage value="#{player.image}" />
     <h:outputText value="#{player.name}" />
</p:autoComplete>
So whatever inside the autocomplete would be used as suggestion, you can place whatever content here. Looks like a nice future enhancement.

manski
Posts: 3
Joined: 03 Feb 2010, 12:56

03 Feb 2010, 17:06

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?

User avatar
optimus.prime
Prime
Posts: 17556
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

03 Feb 2010, 17:20

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.

milankg
Posts: 1
Joined: 14 Apr 2011, 16:27
Location: Novi Sad, Serbia
Contact:

14 Apr 2011, 16:56

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.

Thanks

Post Reply
  • Information
  • Who is online

    Users browsing this forum: Bing [Bot] and 15 guests