It’s end of the day Friday (and end of they year), what’s a better time than to revisit one of the original RichFaces components: rich:suggestionbox. rich:suggestionbox shows a list of values in a pop-up based on the input provided. It has an action method that takes value from an input field. In that action, you write what values to return based the input provided. The list of values returned is then shown in a pop-up. The actual suggestion box is just the pop-up, it needs to be attached to an input field.
JSF page:
As you can see above, suggestion box works just like a data table in JSF. This allows to display any number of columns, including rich content such as images. Also, for attribute is used to attached suggestion box to input field.
This is how suggest action looks inside stateBean:
public ArrayList suggest(Object input) {
String userInput = (String) input;
ArrayList ret = new ArrayList();
for (State state : this.states) {
if ((state.getName().toLowerCase()).startsWith(userInput.toLowerCase())) {
ret.add(state);
}
}
return ret;
}
input is what user entered in the browser. Use this value to filter states and return to the client to be shown inside a pop-up.
Let’s say that you need to enter the state capital into the input field instead of state. By default, the first column is the value inserted. You could move the capital column to be first but that’s not the best approach. Instead, use fetchValue attribute to specify which of the column values to set into the input field:
...
As the pop-up data is retrieved from the server, you might want the user to enter some minimum number of characters before sending a request to the server. To do that set minChars attribute:
...
There is also a client-side suggestion box called rich:comboBox.
If the suggestion box is inside a form, most likely you only want to process this component on the server. You don’t really care to process and validate any other components inside the form. In such case, use ajaxSingle=”true” on rich:suggestionbox or nest the component inside a4j:region tag as shown here:
...
If you are also updating anything based on value selected, you can limit updates to this region by setting renderRegionOnly=”true”. More on regions and this attribute in this post.
You usually need to know which object was selected which makes this components rather difficult to use. We found combobox very limited (maybe it should have some other name like Stringbox for example).
With suggestion box we used option usingSuggestObjects=”true” and a4j:support for getting selected object like this:
This should really be simplified.
a4j:support event=”onobjectchange” ajaxSingle=”true” action=”#{myBean.setMySelectedObj(obj)}”
That’s basically the right approach. I have used event=”onselect” to fire an Ajax request when a selection is made.
Hi,
Nice work. I have a large number of search fields and I want to have a generic suggestBox. Is there anyway of doing it.
@Fawad: don’t think it’s possible
Hi, nice blog.
In RichFaces 4 this component will paging or how can i combine paging with rich:suggestionbox?
Like http://www.extjs.com/deploy/dev/examples/form/forum-search.html
@Paulo Aguiar: I don’t think it will be available in the first release of version 4.
Hi Max,
Any thought about how to utilize selection of multiple entities on the server side?
I’m firing an ajax request on ”onselect” event for a single selection, but don’t know how to generalize it for multiple objects selection.
thanks
(BTW, great blog!)
Gilad
It’s not possible to make a multi selection directly from the pop-up. You can try using token attribute – it will allow you to insert multiple values into the input field. It’s going to be string value. For example, if the token is ‘,’, then if you type ‘ca’ – you can select California, enter token and type ‘ne’ – you can then select New York. You will have this inside the input field: California, New York.
You can try attaching a converter to the input field and convert the string value to the appropriate objects on the server. Hope this helps…
Hi Max,
End up selecting one entity at a time; having each “onselect” event trigger a server action that updates a list of the selected entities, and clean the suggestionbox’ input element.
This way I have to add separate UI for deleting selected entities, but it’s quite intuitive overall.
Thanks for your help,
Gilad
Hi,
Is it possible not to have the first row automatically selected? In example I would like to type the character ‘a’ and leave the field with the TAB-Key. The result should be just the ‘a’ and not the first value of the datatable starting with ‘a’ .
I tried around in suggestionbox.js but couldnt manage it.
Thx for your help,
juergen
@Juergen: I don’t think that’s built into the component right now.
Hi Max,
yes, a great pity, its not implemented yet. The combobox in 3.3.x have some attribute about this. But I need 3.1.x and tried to modify the javascript from the sources to implement this feature. Somehow it doesnt work properly and maybe its difficult to find the right place to modify the sources.
I would appreciate any hint😉
juergen
@Juergen: unfortunately no tips.. I think it would require some coding. Did you enter this feature into Jira to be added in the future?
Hi,
How to pass a selected value from suggestion list to javascript function which is “onselect” event?
Thanks in advance.
@Amit: there is an example how to do this in RichFaces components demo: http://livedemo.exadel.com/richfaces-demo/richfaces/suggestionBox.jsf (second example).
Hi can u post some example for rich:comboBox
@Devika: there is an example of rich:comboBox here: http://livedemo.exadel.com/richfaces-demo/richfaces/comboBox.jsf
Hi,
I can’t find a full example on how to set the selected object in a backing bean.
Could you help me providing some examples?
Thanks.
@Wellington: the selected object is passed into suggest method (input): public ArrayList suggest(Object input) {}
Hi Max !
Help me please!
I don’t can select object in suggestionbox!
I have a user entity anti his county related OneToOne with DB Countries.
In suggestion i select my country and must persist this user with a link on country_id.
Than you!!!
I’m not sure what you mean by not able to select. As for persistence, that’s outside the scope of the component. You can persist objects in the action method.
Hi Max,
Do you have any idea why I can’t load an entity which has a many-to-many relationship?
@Derk: not sure, the component doesn’t care if it’s an entity or just a regular bean. What kind of an error are you getting?
One issue with it though:
so far it’s the only RichFaces component I’ve seen which will trigger in Internet Explorer the ActiveX warning “do you want to enable ActiveX…”. That’s why I had to give up suggestionbox altogether.
@Mario: that’s very strange. What IE version?
Hello Max,
I am using RF 3.1.6 with JSF 1.1 on Jdeveloper 10.1.3.
I have a problem with suggestionbox.
When I run the JSP page and I type in letters, no results are getting displayed.
a4j log is showing error
debug[11:27:20,219]: call getElementById for id= suggestionbox_form:suggestionBoxId:suggest
error[11:27:20,219]: New node for ID suggestionbox_form:suggestionBoxId:suggest is not present in response
debug[11:27:20,220]: call getElementById for id= ajax-view-state
When I display
I could see the data in outputpanel. However no data is displayed in suggestionbox
How can I resolve the issue?
Below is the code I am using.
Suggestion Box will suggest you states capitals names. Comma
and square brackets could be used as suggestions separators.”
My code
Suggestion Box will suggest you states capitals names. Comma
and square brackets could be used as suggestions separators.”
I couldn’t paste the code, I have posted the same issue in the following forum for reference.
http://community.jboss.org/message/566020#566020
@Chacko: do you have any other components on the page?
Hi,
No I do not have any other components on that page.
http://community.jboss.org/message/566042#566042
In the above thread, I have pasted my full source of page.
When I display
I could see the data in outputpanel.
However no data is displayed in suggestionbox
Thanks
Chacko
@Chacko: I don’t have a project that uses RichFaces 3.1.6 (it’s rather old) and JSP to reproduce this. Use Firebug to see if there are any errors, also place a4j:log to see if there are any errors. Another thing to try is remove any optional attributes from the component and try running it.
Hi Max,
a4j log gives one error
error[11:27:20,219]: New node for ID suggestionbox_form:suggestionBoxId:suggest is not present in response
I couldn’t resolve or haven’t got any clue what exactly is the above error!
Earlier I tried removing optional attributes from the component, however no luck.
Even I tried downgrading to 3.1.5 and same errror persist.
From the bean I am able to get the results, but suggestionbox not displaying the results.
I am almost trying to resolve this for the past one week.
For debugging I could send the ear file if you would want to
Thanks
Chacko
@Chacko: if you can send me a war file (include sources) which I can run on Tomcat, I’ll look at it. Use a service such as http://drop.io to attach the file.
Hi Max,
I have put the war file here
http://drop.io/wtraq6p
test3.jsp is the main jsp page.
BTW I use oc4j
If you find any trouble running the page, kindly let me know.
Thanks a lot.
Chacko
@Chacko: Please send me a version that works on Tomcat.
Hi Max,
Sorry I do not have a tomcat version, I use Jdeveloper’s Embedded OC4J.
Are you getting any errors when trying to run the page?
Chacko
@Chacko: I don’t have oc4j installed. I just don’t have time to install and try it.
Hi Max,
Ok, no problem.
Chacko
Hi,
how can i set selectedItem to an entity ?
#{_company.name}
actually i don’t know how pass selected object to method ?
after i set object to entity as below i’ve got this exception
Error in conversion Java Object to JavaScript
@omidp: I can’t see your code (you can link it via http://pastie.org) but maybe this will help: http://community.jboss.org/message/56770?tstart=1
@Max : thanks for your reply
I encounter with RTL suggestionbox when my input text style and suggestionbox
are RTL after i select one of the option huge space is created in textbox
and selected text goes at the end of it
how can i overcome this ?
@omidp: can you post a screen shot and code?
@Max : after debugging and google searching i found out rich:suggestionbox
does not work with apache trinidad and i’m using Richinidad (rich faces trinidad)
i have to find another solution
thanks in advanced