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" 
onclick="openSuggestionBox('suggestion','form1','value','');" 
alt=""/>

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

<a4j:support event="onselect">
<f:setPropertyActionListener value="#{result.id}" 
target="#{someBean.selId}"/>
</a4j:support>
</rich:suggestionbox>
</a4j:region>
</a4j:form>


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.

    ReplyDelete

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