### Create new RichFaces Documentation Jira issue

Summary
255 characters left
Description
Environment
This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.org Community Documentation

- Prev
- Next

### 6.11.3. < rich:comboBox > available since 3.2.0

expand all

#### 6.11.3.1. Description

The <rich:comboBox> is a component creates combobox element with built-in Ajax capability.

Figure 6.205. <rich:comboBox> component

#### 6.11.3.2. Key Features

- Client-side suggestions

- Browser like selection

- Smart user-defined positioning

- Seam entity converter support

- Highly customizable look and feel

- Disablement support

Table 6.305. rich : comboBox attributes

Attribute Name | Description
--- | ---
binding | JSF: The attribute takes a value-binding expression for a component property of a backing bean
buttonClass | Assigns one or more space-separated CSS class names to the component button
buttonDisabledClass | Assigns one or more space-separated CSS class names to the component button disabled
buttonDisabledStyle | CSS style rules to be applied to the component button disabled
buttonIcon | Defines icon for the button element
buttonIconDisabled | Defines disabled icon for the button element
buttonIconInactive | Defines inactive icon for the button element
buttonInactiveClass | Assigns one or more space-separated CSS class names to the component inactive button
buttonInactiveStyle | CSS style rules to be applied to the component inactive button
buttonStyle | CSS style rules to be applied to the component button
converter | JSF: Id of Converter to be used or reference to a Converter
converterMessage | A ValueExpression enabled attribute that, if present, will be used as the text of the converter message, replacing any message that comes from the converter
defaultLabel | Defines default label for the input field element
directInputSuggestions | Defines the first value from the suggested in input field. Default value is "false".
disabled | HTML: When set for a form control, this boolean attribute disables the control for your input
enableManualInput | Enables keyboard input, if "false" keyboard input will be locked. Default value is "true"
filterNewValues | Defines the appearance of values in the list. Default value is "true".
hideDelay | Delay between losing focus and pop-up list closing. Default value is "0".
id | JSF: Every component may have a unique id that is automatically created if omitted
immediate | A flag indicating that this component value must be converted and validated immediately (that is, during Apply Request Values phase), rather than waiting until a Process Validations phase
inputClass | Assigns one or more space-separated CSS class names to the component input field
inputDisabledClass | Assigns one or more space-separated CSS class names to the component input field disabled
inputDisabledStyle | CSS style rules to be applied to the component input field disabled
inputInactiveClass | Assigns one or more space-separated CSS class names to the component inactive input field
inputInactiveStyle | CSS style rules to be applied to the component inactive input field
inputStyle | CSS style rules to be applied to the component input field
itemClass | Assigns one or more space-separated CSS class names to the component items
itemSelectedClass | Assigns one or more space-separated CSS class names to the component selected item
label | A localized user presentable name for this component.
listClass | Assigns one or more space-separated CSS class names to the component popup list
listHeight | Defines height of file pop-up list. Default value is "200px".
listStyle | CSS style rules to be applied to the component popup list
listWidth | Defines width of file popup list
onblur | DHTML: The client-side script method to be called when the element loses the focus
onchange | DHTML: The client-side script method to be called when the element value is changed
onclick | DHTML: The client-side script method to be called when the element is clicked
ondblclick | DHTML: The client-side script method to be called when the element is double-clicked
onfocus | DHTML: The client-side script method to be called when the element gets the focus
onkeydown | DHTML: The client-side script method to be called when a key is pressed down over the element
onkeypress | DHTML: The client-side script method to be called when a key is pressed over the element and released
onkeyup | DHTML: The client-side script method to be called when a key is released
onlistcall | The clientside script method to be called when the list is called
onlistclose | The clientside script method to be called when the list is closed
onmousedown | DHTML: The client-side script method to be called when a mouse button is pressed down over the element
onmousemove | DHTML: The client-side script method to be called when a pointer is moved within the element
onmouseout | DHTML: The client-side script method to be called when a pointer is moved away from the element
onmouseover | DHTML: The client-side script method to be called when a pointer is moved onto the element
onmouseup | DHTML: The client-side script method to be called when a mouse button is released
onselect | DHTML: The client-side script method to be called when some text is selected in the text field. This attribute can be used with the INPUT and TEXTAREA elements.
rendered | JSF: If "false", this component is not rendered
required | JSF: If "true", this component is checked for non-empty input
requiredMessage | A ValueExpression enabled attribute which defines text of validation message to show, if a required field is missing
selectFirstOnUpdate | Defines if the first value from suggested is selected in pop-up list. Default value is "true".
showDelay | Delay between event and pop-up list showing. Default value is "0".
style | HTML: CSS style rules to be applied to the component
styleClass | JSF: Assigns one or more space-separated CSS class names to the component. Corresponds to the HTML "class" attribute.
suggestionValues | Defines the suggestion collection
tabindex | HTML: This attribute specifies the position of the current element in the tabbing order for the current document. This value must be a number between 0 and 32767. User agents should ignore leading zeros
validator | JSF: MethodBinding pointing at a method that is called during Process Validations phase of the request processing lifecycle, to validate the current value of this component
validatorMessage | A ValueExpression enabled attribute that, if present, will be used as the text of the validator message, replacing any message that comes from the validator
value | JSF: The current value of this component
valueChangeListener | JSF: Listener for value changes
width | HTML: Width of the component. Default value is "150".

Table 6.306. Component identification parameters

Name | Value
--- | ---
component-type | org.richfaces.ComboBox
component-class | org.richfaces.component.html.HtmlComboBox
component-family | org.richfaces.ComboBox
renderer-type | org.richfaces.renderkit.ComboBoxRenderer
tag-class | org.richfaces.taglib.ComboBoxTag

#### 6.11.3.3. Creating the Component with a Page Tag

Here is a simple example as it could be used on a page:

    ...

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

    ...

#### 6.11.3.4. Creating the Component Dynamically Using Java

    import org.richfaces.component.html.HtmlComboBox;

    ...

    HtmlComboBox myComboBox = new HtmlComboBox();

    ...

#### 6.11.3.5. Details of Usage

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

- Default - only input and button is shown

- Input, button and a popup list of suggestions attached to input is shown

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

- Using the "suggestionValues" attribute, that defines the suggestion collection

      ...

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

      ...

- Using the <f:selectItem /> or <f:selectItems /> JSF components.

      ...

      <rich:comboBox value="#{bean.state}" valueChangeListener="#{bean.selectionChanged}">

              <f:selectItems  value="#{bean.selectItems}"/>

              <f:selectItem itemValue="Oregon"/>

              <f:selectItem itemValue="Pennsylvania"/>

              <f:selectItem itemValue="Rhode Island"/>

              <f:selectItem itemValue="South Carolina"/>

      </rich:comboBox>

      ...

  ## Note:

  These JSF components consider only the "value" attribute for this component.

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:

Figure 6.206. <rich:comboBox> with "directInputSuggestions" attribute.

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:

Figure 6.207. <rich:comboBox> with "selectFirstOnUpdate" attribute.

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:

Figure 6.208. <rich:comboBox> with "defaultLabel" attribute.

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:

Figure 6.209. <rich:comboBox> with "disabled" attribute.

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.

#### 6.11.3.6. JavaScript API

Table 6.307. JavaScript API

Function | Description
--- | ---
showList() | Shows the popup list
hideList() | Hides the popup list
enable() | Enables the control for input
disable() | Disables the control for input

#### 6.11.3.7. Look-and-Feel Customization

For skinnability implementation, the components use a style class redefinition method. Default style classes are mapped on skin parameters.

There are two ways to redefine the appearance of all <rich:comboBox> components at once:

- Redefine the corresponding skin parameters

- Add to your style sheets style classes used by a <rich:comboBox> component

#### 6.11.3.8. Skin Parameters Redefinition

Table 6.308. Skin parameters redefinition for a popup list

Skin parameters | CSS properties
--- | ---
tableBackgroundColor | background
panelBorderColor | border-color

Table 6.309. Skin parameters redefinition for a button background, inactive button background, button background in pressed and disabled state

Skin parameters | CSS properties
--- | ---
tabBackgroundColor | background-color

Table 6.310. Skin parameters redefinition for a button

Skin parameters | CSS properties
--- | ---
panelBorderColor | border-top-color
panelBorderColor | border-left-color

Table 6.311. Skin parameters redefinition for an inactive button

Skin parameters | CSS properties
--- | ---
panelBorderColor | border-top-color
panelBorderColor | border-left-color

Table 6.312. Skin parameters redefinition for a disabled button

Skin parameters | CSS properties
--- | ---
panelBorderColor | border-top-color
panelBorderColor | border-left-color

Table 6.313. Skin parameters redefinition for a hovered button

Skin parameters | CSS properties
--- | ---
selectControlColor | border-color

Table 6.314. Skin parameters redefinition for a font

Skin parameters | CSS properties
--- | ---
generalSizeFont | font-size
generalFamilyFont | font-family
generalTextColor | color

Table 6.315. Skin parameters redefinition for a font in inactive state

Skin parameters | CSS properties
--- | ---
generalSizeFont | font-size
generalFamilyFont | font-family
generalTextColor | color

Table 6.316. Skin parameters redefinition for a font in disabled state

Skin parameters | CSS properties
--- | ---
headerFamilyFont | font-size
headerFamilyFont | font-family

Table 6.317. Skin parameters redefinition for an input field

Skin parameters | CSS properties
--- | ---
controlBackgroundColor | background-color
panelBorderColor | border-bottom-color
panelBorderColor | border-right-color

Table 6.318. Skin parameters redefinition for an inactive input field

Skin parameters | CSS properties
--- | ---
controlBackgroundColor | background-color
panelBorderColor | border-bottom-color
panelBorderColor | border-right-color

Table 6.319. Skin parameters redefinition for a disabled input field

Skin parameters | CSS properties
--- | ---
controlBackgroundColor | background-color
panelBorderColor | border-bottom-color
panelBorderColor | border-right-color

Table 6.320. Skin parameters redefinition for an item

Skin parameters | CSS properties
--- | ---
generalSizeFont | font-size
generalFamilyFont | font-family
generalTextColor | color

Table 6.321. Skin parameters redefinition for a selected item

Skin parameters | CSS properties
--- | ---
headerBackgroundColor | background-color
headerBackgroundColor | border-color
generalTextColor | color

#### 6.11.3.9. Definition of Custom Style Classes

On the screenshot there are classes names that define styles for component elements.

Figure 6.210. Classes names

Figure 6.211. Classes names

Table 6.322. Classes names that define popup list representation

Class name | Description
--- | ---
rich-combobox-shell | Defines styles for a wrapper <div> element of a list
rich-combobox-list-position | Defines position of a list
rich-combobox-list-decoration | Defines styles for a list
rich-combobox-list-scroll | Defines styles for a list scrolling

Table 6.323. Classes names that define font representation

Class name | Description
--- | ---
rich-combobox-font | Defines styles for a font
rich-combobox-font-inactive | Defines styles for an inactive font
rich-combobox-font-disabled | Defines styles for a disabled font

Table 6.324. Classes names that define input field representation

Class name | Description
--- | ---
rich-combobox-input | Defines styles for an input field
rich-combobox-input-disabled | Defines styles for an input field in disabled state
rich-combobox-input-inactive | Defines styles for an inactive input field

Table 6.325. Classes names that define item representation

Class name | Description
--- | ---
rich-combobox-item | Defines styles for an item
rich-combobox-item-selected | Defines styles for a selected item

Table 6.326. Classes names that define button representation

Class name | Description
--- | ---
rich-combobox-button | Defines styles for a button
rich-combobox-button-inactive | Defines styles for an inactive button
rich-combobox-button-disabled | Defines styles for a button in disabled state
rich-combobox-button-hovered | Defines styles for a hovered button
rich-combobox-button-background | Defines styles for a button background
rich-combobox-button-background-disabled | Defines styles for a disabled button background
rich-combobox-button-background-inactive | Defines styles for an inactive button background
rich-combobox-button-pressed-background | Defines styles for a pressed button background
rich-combobox-button-icon | Defines styles for a button icon
rich-combobox-button-icon-inactive | Defines styles for an inactive button icon
rich-combobox-button-icon-disabled | Defines styles for a disabled button icon

Table 6.327. Classes names that define shadow representation

Class name | Description
--- | ---
rich-combobox-shadow | Defines styles for a wrapper <div> element of a shadow
rich-combobox-shadow-tl | Defines styles for a top-left element of a shadow
rich-combobox-shadow-tr | Defines styles for a top-right element of a shadow
rich-combobox-shadow-bl | Defines styles for a bottom-left element of a shadow
rich-combobox-shadow-br | Defines styles for a bottom-right element of a shadow

In order to redefine styles for all <rich:comboBox> components on a page using CSS, it's enough to create classes with the same names (possible classes could be found in the tables above) and define necessary properties in them.

Example:

    ...

    .rich-combobox-list-decoration{

            background-color:#ecf4fe;

    }

    ...

This is a result:

Figure 6.212. Redefinition styles with predefined classes

In the example background color for popup list was changed.

Also it's possible to change styles of particular <rich:comboBox> component. In this case you should create own style classes and use them in corresponding <rich:comboBox> styleClass attributes. An example is placed below:

Example:

    ...

    .myClass{

            font-weight:bold;

    }

    ...

The "listClass" attribute for <rich:comboBox> is defined as it's shown in the example below:

Example:

    <rich:comboBox ... listClass="myClass"/>

This is a result:

Figure 6.213. Redefinition styles with own classes and "styleClass" attributes

As it could be seen on the picture above, the font weight for items was changed.

#### 6.11.3.10. Relevant Resources Links

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

- Prev6.11.2. < rich:colorPicker > ...
- Top of page
- Front page
- Next6.11.4. < rich:editor > ...