RichFaces rich:autocomplete

RichFaces Rich AutoComplete with features, configuration, architecture, a4j:log, a4j:ajax, a4j:commandlink, a4j:outputpanel,rich:autocomplete, rich:fileupload, rich:list, rich:panel, rich:datascroller, rich:dropdownmenu, rich:messages, rich:progressbar, rich:tooltip etc.

RichFaces rich:autocomplete

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

  1. <?xml version='1.0' encoding='UTF-8' ?>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <ui:composition xmlns="http://www.w3.org/1999/xhtml"  
  4. xmlns:h="http://java.sun.com/jsf/html"  
  5. xmlns:f="http://java.sun.com/jsf/core"  
  6. xmlns:ui="http://java.sun.com/jsf/facelets"  
  7. xmlns:rich="http://richfaces.org/rich">  
  8. <f:view>  
  9. <h:head>  
  10. <title>AutoComplete Example</title>  
  11. </h:head>  
  12. <h:body>  
  13. <h:form>  
  14. <h:outputText value="Enter Country Name "></h:outputText>  
  15. <rich:autocomplete  
  16. value="#{country.countryName}"  
  17. minChars="2"  
  18. autocompleteMethod="#{country.countryList()}"  
  19. >  
  20. </rich:autocomplete>  
  21. </h:form>  
  22. </h:body>  
  23. </f:view>  
  24. </ui:composition>  

Managed Bean

// Country.java

  1. import java.util.ArrayList;  
  2. import java.util.List;  
  3. import javax.faces.bean.ManagedBean;  
  4. import javax.faces.bean.RequestScoped;  
  5. @ManagedBean  
  6. @RequestScoped  
  7. public class Country {  
  8. String CountryName;  
  9. public List<String> countryList() {  
  10. ArrayList<String> list = new ArrayList<>();  
  11. list.add("India");  
  12. list.add("Australia");  
  13. list.add("Germany");  
  14. list.add("Italy");  
  15. list.add("United States");  
  16. list.add("Russia");  
  17. return list;  
  18. }  
  19. public String getCountryName() {  
  20. return CountryName;  
  21. }  
  22. public void setCountryName(String CountryName) {  
  23. this.CountryName = CountryName;  
  24. }  
  25. }