GeeCON Prague 2014*
The moose likes JSF and the fly likes Free text entry combo box? Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


JavaRanch » Java Forums » Java » JSF
Bookmark "Free text entry combo box?" Watch "Free text entry combo box?" New topic
Author

Free text entry combo box?

Jason Irwin
Ranch Hand

Joined: Jun 09, 2009
Posts: 327
I am using RichFaces 3.3.1 with JSF 1.2 Mojarra.

For this project I have to provide a "combo box" type control. The user should allowed to enter *any text* and the control will filter on that entry.

For example: if the control has the options of "Alpha, Beta, Gamma, Delta" and the user entered "ta", then "Beta" and "Delta" should appear in the dropdown list.
If the control has the options of "London, Manchester, Winchester, Paris" and the and the user entered "est", then "Manchester" and "Winchester" should appear in the dropdown list.

I know the RichFaces suggestion box exists, but that can only do exact matches I believe, not handle free-text entries.

Does anyone know how I can possibly provide this functionality? I guess I could use a normal inputbox and JQuery, but I'd rather do it all within the RichFaces framework. Will I have to include other implementations (such as Tomahawk) and is that even wise? I'm not looking for the complete solution, but even an idea of where to start or find an example of something similar would be a big help!

The matter is further complicated by having to keep a textbox showing the "code" for the selected item in sync (the user could also type the code in here, meaning the combo box must update). I currently have the syncing working using some simple JavaScript Iw rote (this avoids the performance hit of a round-trip to the server).

I have already swapped once from Apache Trinidad to IBM RichFaces - if at all possible, I'd like to avoid having to switch back; although I will do that if I have to.


SCJP6
Kavita Tipnis
Ranch Hand

Joined: Sep 21, 2008
Posts: 177
Jason,

I believe richfaces combox has a suggestion values attribute which takes a list as an input.
You could filter out the values in your original list based on the user input and update your suggestion values list
For example

original list = Alpha,Beta,Theta

user ip = eta

Filter out values from original list (simple java string.contains) should work and add to the suggestion values list and re render the combo box.

I have not tried this but might be of some use

Jason Irwin
Ranch Hand

Joined: Jun 09, 2009
Posts: 327
Thanks Kavita, that's an idea. I did look into the RichFaces Suggestion box a bit more and it is more powerful than I originally thought. I can define the "autocomplete" to be whatever I want; it's basically your exact suggestion as it happens.

At the moment the "solution" appears to be a basic inputbox and JQuery, that way we can keep all the processing on the client. I have not tried this yet, so may well go back to your idea if I hit problems.

Thanks again.
Jason Irwin
Ranch Hand

Joined: Jun 09, 2009
Posts: 327
I don't particularly want to "wake the dead", but I do want to add my solution in case anyone else hits similar problems.

Long story short - with large data sets the RichFaces Suggestion Box suffers from performance problems (I had to handle 2,500+ possibly values). RichFaces includes JQuery though, and that is your potential solution.

Rather than using a RichFaces Suggestion box, I used a normal h:inputText and used JQuery to bind the JQuery:Autocomplete plugin to that textbox.
For the data values, I had an application scoped bean that read the data from a database, it then generated a javascript file containing the necessary arrays. As this data wasn't going to change much, I wasn't too concerned about the size of the file (circa 200k) as it would only get downloaded once in a while.

It still suffers from some performance issues if you use an older browser (IE6 or IE7) but on a modern one, it flies; whereas the suggestion box suffered lag as the server tried to respond. Also, the client now takes a load off the server but not sending requests up and down the wire, potentially after each keypress. Obviously though, this solution is only really applicable if your clients are using full-browser with Javascript enabled; I rather doubt it would work on a mobile phone!

The JQuery:Autocomplete functionality is broadly similar to the suggestion box and it also supports AJAX.
 
GeeCON Prague 2014
 
subject: Free text entry combo box?