The value attribute stores the text entered by the user for the auto-complete box. Suggestions shown in the auto-complete list can be specified using one of two different methods:

Use the mode attribute to determine how the suggestion list is requested:

Users can type into the text field to enter a value, which also searches through the suggestion items in the drop-down box. By default, the first suggestion item is selected as the user types. This behavior can be deactivated by setting selectFirst="false".

Setting autofill="true" causes the <rich:autocomplete> to fill the text field box with a matching suggestion as the user types.

To allow users to enter multiple values separated by specific characters, use the tokens attribute. As the user types, a suggestion will present as normal. When they enter a character specified as a token, this begins a new suggestion process, and the component only uses text entered after the token character for suggestions. For example, if tokens=", " is set, the <rich:autocomplete> component uses both the comma and space characters as tokens to separate entries. When the user enters a comma or a space, a new suggestion process begins.

The <rich:autocomplete> component uses the JavaScript startsWith() method to create the list of suggestions. The filtering is performed on the client side. Alternatively, use the clientFilterFunction attribute to specify a custom filtering function. The custom function must accept two parameters: the subString parameter is the filtering value as typed into the text box by the user, and the value parameter is an item in the list of suggestions against which the subString must be checked. Each item is iterated through and passed to the function as the value parameter. The custom function must return a boolean value indicating whether the passed item meets the conditions of the filter, and the suggestion list is constructed from successful items.

​<script>
​   function customFilter(subString, value){
​      if(subString.length>=1) {
​         if(value.indexOf(subString)!=-1) 
​            return true;
​      }else return false;
​   };
​</script>
​<h:form>
​   <rich:autocomplete mode="client" minChars="0" autofill="false"
​                      clientFilterFunction="customFilter"
​                      autocompleteMethod="#{autocompleteBean.autocomplete}" />
​</h:form>

The <rich:autocomplete> component can be controlled through the JavaScript API. The JavaScript API provides the following functions: