Using Richfaces 'Suggestion Box' As Combo Box

If you had already tried to use Richfaces Combo Box for populating the 'id-value' pairs, you would have noticed that the dropdown/combo box will be populated with id's, rather than values. It's not a bug or a problem with richfaces framework, but a different design. There's a workaround for this, which lets you use the 'Richfaces Suggestion Box' component, to work like a combo box or a dropdown list.

Below is the sample code snippet from a facelets file, which acts like a combo box:

<a4j:form id="form1">



<h:outputText value="Key :"/>
<a4j:region selfRendered="true" id="region1">
<h:inputText id="value" value="Value : "/>
<h:graphicImage value="arrow.png" 

<rich:suggestionbox id="suggestion" for="value" 
suggestionAction="#{someBean.fill}"  var="result" ignoreDupResponses="true">
<h:outputText value="#{result.description}"/>

<a4j:support event="onselect">
<f:setPropertyActionListener value="#{}" 

In the above code, I'm using a arrow image (down arrow) beside the input text box, to make it look like a combo-box/drop-down list and created a javascript function, which is called on click of that arrow image. This javascript function does nothing special, but clears the text-box and calls the actual 'Suggestion Box' method (creates an AJAX request).

And below is the Javascript code for 'openSuggestion' function:

1 comment:

  1. It works but the issue with the solution is if the user decides not to change the value after clicking the arrow, he will lose track of the original selection.


Note: Only a member of this blog may post a comment.