Using Richfaces 'Suggestion Box' As Combo Box

Posted on October 19, 2009


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

        <rich:suggestionbox id="suggestion" for="value" var="result"
                suggestionAction="#{someBean.fill}" 
                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:

<script type="text/javascript">
    function openSuggestionBox(suggestionBoxId,formId, textBoxId) {
        document.getElementById(formId + ':' + textBoxId).value='';
        v=$(formId + ':' + 
            suggestionBoxId).component.callSuggestion(true); 
    }
</script>


Blog Categories
Disclaimer
The views expressed on this blog are my personal views and do not reflect the views of my employer or campaigns I am supporting.

All sample code is provided for illustrative purposes only. These examples have not been thoroughly tested under all conditions. The writer therefore, cannot guarantee or imply reliability, serviceability, or function of these programs.

All programs contained herein are provided to you "AS IS" without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.