Create new RichFaces Documentation Jira issue

This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.orgCommunity Documentation

6.11.3.  < rich:comboBox > available since 3.2.0

The <rich:comboBox> component allows to create a combobox element with the built-in Ajax capability.


The <rich:comboBox> is a simplified suggestion box component, that provides input with client-side suggestions. The component could be in two states:

There are two ways to get values for the popup list of suggestions:

Popup list content loads at page render time. No additional requests could be performed on the popup calling.

The "value" attribute stores value from input after submit.

The "directInputSuggestions" attribute defines, how the first value from the suggested one appears in an input field. If it's "true" the first value appears with the suggested part highlighted.


...
<rich:comboBox value="#{bean.state}" suggestionValues="#{bean.suggestions}" directInputSuggestions="true" />   
...

This is a result:


The "selectFirstOnUpdate" attribute defines if the first value from suggested is selected in a popup list. If it's "false" nothing is selected in the list before a user hovers some item with the mouse.


...
<rich:comboBox value="#{bean.state}" suggestionValues="#{bean.suggestions}" selectFirstOnUpdate="false" />           
...

This is a result:


The "defaultLabel" attribute defines the default label of the input element. Simple example is placed below.


...
<rich:comboBox value="#{bean.state}" suggestionValues="#{bean.suggestions}" defaultLabel="Select a city..." />     
...

This is a result:


With the help of the "disabled" attribute you can disable the whole <rich:comboBox> component. See the following example.


...
<rich:comboBox value="#{bean.state}" suggestionValues="#{bean.suggestions}" defaultLabel="Select a city..." disabled="true" />       
...

This is a result:


The "enableManualInput" attribute enables/disables input field, so when enableManualInput = "false", user can only pick the value manually and has no possibility to type in the value (default value is "false").

The <rich:comboBox> component provides to use specific event attributes:

  • "onlistcall" which is fired before the list opening and gives you a possibility to cancel list popup/update

  • "onselect" which gives you a possibility to send Ajax request when item is selected

The <rich:comboBox> component allows to use sizes attributes:

  • "listWidth" and "listHeight" attributes specify popup list sizes with values in pixels

  • "width" attribute customizes the size of input element with values in pixels.

Table of <rich:comboBox> attributes.



Table 6.173. Style classes (selectors) with the corresponding skin parameters

Class (selector) nameDescriptionSkin ParameterCSS properties mapped
input.rich-combobox-button-background, input.rich-combobox-button-background-disabled, input.rich-combobox-button-background-inactiveDefine styles for a background of the combobox button, disabled button and inactive button respectivelytabBackgroundColorbackground-color
input.rich-combobox-button-pressed-backgroundDefine styles for a background of the pressed buttontabBackgroundColorbackground-color
input.rich-combobox-button, input.rich-combobox-button-inactive, input.rich-combobox-button-disabledDefine styles for the combobox button, disabled button and inactive button respectivelypanelBorderColorborder-top-color
panelBorderColorborder-left-color
.rich-combobox-font, input.rich-combobox-fontDefine styles for a fontgeneralSizeFontfont-size
generalFamilyFontfont-family
generalTextColorcolor
input.rich-combobox-font-disabled, .rich-combobox-font-disabledDefines styles for a disabled fontheaderFamilyFontfont-family
headerSizeFontfont-size
input.rich-combobox-font-inactive, .rich-combobox-font-inactiveDefines styles for an inactive fontgeneralSizeFontfont-size
generalFamilyFontfont-family
generalTextColorcolor
.rich-combobox-itemDefines styles for an itemgeneralSizeFontfont-size
generalFamilyFontfont-family
generalTextColorcolor
.rich-combobox-input, .rich-combobox-input-disabled, .rich-combobox-input-inactiveDefine styles for an input field, a disabled input field, an inactive input field respectivelycontrolBackgroundColorbackground-color
panelBorderColorborder-bottom-color
panelBorderColorborder-right-color
.rich-combobox-item-selectedDefines styles for a selected itemheaderBackgroundColorbackground-color, border-color
headerTextColorcolor
.rich-combobox-list-decorationDefines styles for a list decorationpanelBorderColorborder-color
tableBackgroundColorbackground
input.rich-combobox-button-hoveredDefines styles for a hovered buttonselectControlColorborder-color


You can find all necessary information about style classes redefinition in Definition of Custom Style Classes section.

Visit the ComboBox page at RichFaces LiveDemo for examples of component usage and their sources.