RichFaces <rich:autocomplete>

This component is an auto-completing input-box with built-in Ajax capabilities. It supports client-side suggestions, browser-like selection and customization of the look and feel.

It is a standard JavaServer Faces user interface input control with added validation feature.

Style classes and skin parameters

The following table includes the Style classes (selectors) and corresponding skin parameters for the auto-complete component.

Class	Function	Skin Parameters	Mapped CSS properties
.rf-au-fnt	It is used to define styles for the auto-complete box font.	generalTextColor generalFamilyFont	color font-family
.rf-au-inp	It is used to define styles for the auto-complete input box.	controlBackgroundColor	background-color
.rf-au-fld	It is used to define styles for the auto-complete field.	panelBorderColor controlBackgroundColor	border-color background-color
.rf-au-fld-btn	It is used to define styles for a button in the auto-complete field.	No skin parameters.
.rf-au-btn	It is used to define styles for the auto-complete box button.	panelBorderColor	border-left-color
.rf-au-btn-arrow	It is used to define styles for the button arrow.	No skin parameters.
.rf-au-btn-arrow-dis	It is used to define styles for the button arrow when it is disabled.	No skin parameters.
.rf-au-lst-scrl	It is used to define styles for the scrollbar in the auto-complete list.	No skin parameters.
.rf-au-itm	It is used to define styles for an item in the auto-complete list.	No skin parameters.
.rf-au-itm-sel	It is used to define styles for a selected item in the auto-complete list.	headerBackgroundColor generalTextColor	background-color border-color
.rf-au-shdw	It is used to define styles for the auto-complete box shadow.	No skin parameters.
.rf-au-shdw-t, .rf-au-shdw-l, .rf-au-shdw-r, .rf-au-shdw-b	These classes define styles for the top, left, right, and bottom part of the auto-complete box shadow.	No skin parameters.
.rf-au-tbl	It is used to define styles for a table in the auto-complete box.	No skin parameters.

Example

Here, in the following example, we are implementing <rich:autocomplete> component. This example contains the following files.

JSF File

// autocomplete.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:rich="http://richfaces.org/rich">
<f:view>
<h:head>
<title>AutoComplete Example</title>
</h:head>
<h:body>
<h:form>
<h:outputText value="Enter Country Name "></h:outputText>
<rich:autocomplete
value="#{country.countryName}"
minChars="2"
autocompleteMethod="#{country.countryList()}"
>
</rich:autocomplete>
</h:form>
</h:body>
</f:view>
</ui:composition>

Managed Bean

// Country.java

import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class Country {
String CountryName;
public List<String> countryList() {
ArrayList<String> list = new ArrayList<>();
list.add("India");
list.add("Australia");
list.add("Germany");
list.add("Italy");
list.add("United States");
list.add("Russia");
return list;
}
public String getCountryName() {
return CountryName;
}
public void setCountryName(String CountryName) {
this.CountryName = CountryName;
}
}

Output: