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
Comments