PrimeFaces AutoComplete

It is an input component that provides live suggestions while an input is being typed.

Suggestions are loaded by calling a server side completeMethod that takes a single string parameter.

PrimeFaces provides <p:autoComplete> component which is used to create a text box with suggestions. It includes various attribute that are tabled below.

AutoComplete Attributes

The following table contains attributes for the AutoComplete attribute.

Attribute	Default value	Return type	Description
id	null	String	It is an unique identifier of the component.
rendered	true	Boolean	It returns boolean value to specify the rendering of the component.
binding	null	Object	It is used for an el expression that maps to a server side UIComponent instance in a backing bean.
value	null	Object	It is a value of the component that can be either an EL expression of a literal text.
converter	null	Object	An el expression or a literal text that defines a converter for the component.
immediate	false	Boolean	It returns boolean when set true, process validations logic is executed at apply request values phase for this component.
required	false	Boolean	It is used to marks component as required.
RequiredMessage	null	String	It is used to set message to be displayed when required field validation fails.
dropdown	false	Boolean	It enables dropdown mode when set true.
accesskey	null	String	It is used to set access key that when pressed transfers focus to the input element.
autocomplete	null	String	It executes autocomplete behavior.
Lang	null	String	It is used to set language used in the generated markup for this component.
onclick	null	String	Client side callback to execute when input element is clicked.
active	true	Boolean	Defines if autocomplete functionality is enabled.

Example

Here, in the following example, we are implementing <p: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">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>AutoComplete</title>
</h:head>
<h:body>
<h3>PrimeFaces AutoComplete Example</h3>
<h:form>
<p:growl id="msgs" showDetail="true" />
<h:panelGrid columns="2" cellpadding="5">
<p:outputLabel value="Provide Country: " />
<p:autoComplete value="#{autoComplete.countryName}" completeMethod="#{autoComplete.countryList()}" />
</h:panelGrid>
</h:form>
</h:body>
</html>

ManagedBean

// AutoComplete.java

package com.javatpoint;
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
@ManagedBean
public class AutoComplete {
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: