How to make a rich:suggestionbox look like a combobox

Version 7

    This is pretty easy...

     

    Assuming you already have a rich:suggestionbox component:

     

    <rich:suggestionbox id="mySuggestionBox"
       for="myInputBox"
       suggestionAction="#{MySuggestionBean.getSuggestions}"
       var="suggestionWrapper"
       fetchValue="#{suggestionWrapper.plainSuggestion}"
       onselect="a4jSuggestionSelected();"
       minChars="1">
       <t:column><h:outputText value="#{suggestionWrapper.formattedSuggestion}" escape="false"/></t:column>
    </rich:suggestionbox>
    

     

    You just create an image to the right of your input box:

     

     

    <h:graphicImage url="/images/suggestion-box-down-arrow.png"
       onclick="toggleSuggestions(#{rich:component('mySuggestionBox')});"
       alt="Show list"
       styleClass="suggestionBoxDownButton"/>
    

     

    And your JavaScript method:

     

    function toggleSuggestions ( suggestionBox ) {
       if( suggestionBox.active )
           suggestionBox.hide();
       else
           suggestionBox.callSuggestion( true );
    }
    

     

    Voila!

     

    Hope this helps somebody.

    -Shadow

     

    richfaces-showcase online sample(second sample on the page)