We're introducing the new OpenFaces SelectOneMenu component which is already available in the latest nightly builds. This component is API-compatible with the standard <h:selectOneMenu> tag, though it provides such additional features as autocompletion support, displaying the drop-down items with JSF compnents and/or HTML markup, multi-column items display, etc. This component is still in development and some features are still going to be added, as well as its API which can still undergo minor changes before the release, though you can already check it out now.
The fact that it's API-compatible with its standard analog means that you can migrate to the OpenFaces version quite easily. Say, you have a standard combo-box, which is declared like this:
<h:selectOneMenu value="#{SelectOneMenuBean.selectedCity}" converter="#{SelectOneMenuBean.cityConverter}">
 <f:selectItems value="#{SelectOneMenuBean.cityItems}"/>
</h:selectOneMenu>
you can just replace the <h:selectOneMenu> tag with <o:selectOneMenu> to switch to the extended OpenFaces version of this component:
<o:selectOneMenu value="#{SelectOneMenuBean.selectedCity}" converter="#{SelectOneMenuBean.cityConverter}">
 <f:selectItems value="#{SelectOneMenuBean.cityItems}"/>
</o:selectOneMenu>
Doing this will turn on the autocompletion or automatic search functionality, where you can type a part of an item, a city in this case, and have the matching item to be highlighted automatically. This feature makes it possible to use combo-boxes even if you need to select from a very large number of items, say several hundred items, where using the standard SelectOneMenu component would be impractical. Here's how the latter declaration looks in the browser when searching for an item:
This component is not in the online demo yet, though you can download the nightly build demo that includes this example (deployable on Tomcat 6), and its source code.
SelectOneMenu vs DropDownField
Although the SelectOneMenu above looks very much like the DropDownField component, they have one key difference besides the API differences.
The DropDownField component (as well as its cousin SuggestionField) is essentially an input component, like other standard input components such as <h:inputText>. In other words, despite it contains the drop-down list to choose items from, the purpose of the DropDownField component is just the entry of text, and the component's drop-down list as well as the autocompletion functionality just assists the text entry. This particularly means that if for example the drop-down list contains two items with the same name (say London, UK and London, OH), it won't be possible to distinguish between them -- the DropDownField will just contain the "London" text when clicking on any of these items and it will be the same as if the user entered this text without even opening the drop-down list.
In contrast, the SelectOneMenu component is a select component, which means that although it allows typing item name in its embedded input field, its purpose is to select from a predefined list of items. So typing "London" (or a partial text) will open a drop-down list for selecting the desired option, and the selected item will be saved in the component and will properly reflect the original item object that corresponds to the selected item.
Nevertheless, the components have much in common, and the SelectOneMenu component has much of the DropDownField's API and possibilities, like customizing the suggestion options, and multi-column drop-down list display. These are briefly shown below.
Additional Customization Options
By default, typing in the SelectOneMenu's field brings the drop-down where all items are displayed and the one matching the typed string being highlighted. It is also possible to make SelectOneMenu filter the suggestion list and display only the matching items using the suggestionMode attribute, which can take the following values:
- "stringStart" - Shows suggestions that begin with the entered value.
- "substring" - Shows suggestions that contain the entered value.
- "stringEnd" - Shows suggestions that end with the entered value.
- "all" (the default value) - Shows all items in the list of suggestions.
The SelectOneMenu also has much of the API applicable to DropDownField component, and one of the notable ones is the ability to create multi-column drop-down lists using the embedded <o:column> tags.
So we'll add these two capabilities to our original example:
<o:selectOneMenu value="#{SelectOneMenuBean.selectedCity}"
                converter="#{SelectOneMenuBean.cityConverter}"
                var="city"
                suggestionMode="stringStart">
 <f:selectItems value="#{SelectOneMenuBean.cityItems}"/>
 <o:column style="color: black">#{city.name}</o:column>
 <o:column style="color:gray">#{city.country}</o:column>
</o:selectOneMenu>
and the resulting combo-box will look like this as a result:
You can check out the DropDownField documentation for more customization options until ComboBox documentation receives its own documentation.
