PrimeFaces AutoComplete + completeMethod Example

Primefaces provides incredible amount of new components that adhered the different aspect of Ajax. One of the component AutoComplete is most widely used with the web applications. That component is AutoComplete which is a core primefaces component used for providing the user prompt suggestions while the input is being typed into the input box.

This tutorial should clarify the AutoComplete component once it filled using completeMethod strategy. In the completeMethod strategy, suggestions loaded by calling the server side completeMethod that takes a single string parameter which is the text entered.

1. AutoComplete Tag Info

AutmComplete General Info

2. AutoComplete Attributes

AutoComplete Attributes

3. Managed Bean

AutoComplete.java

package net.javabeat.primefaces;

import java.util.ArrayList;
import java.util.List;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class AutoComplete {
	private String message;

	public AutoComplete (){

	}

	public List<String> complete(String query){
		List<String> queries = new ArrayList<String>();
		for(int i = 0 ; i < 15 ; i++){
			queries.add(query+i);
		}
		return queries;
	}

	public String getMessage() {
		return message;
	}

	public void setMessage(String message) {
		this.message = message;
	}
}

4. The View

index.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
	<h:head>
		<script name="jquery/jquery.js" library="primefaces"></script>
	</h:head>
	<f:view>
		<h:form prependId="false">
			<h:outputText value="Type JavaBeat :"/>
			<p:autoComplete value="#{autoComplete.message}" completeMethod="#{autoComplete.complete}"></p:autoComplete>
		</h:form>
	</f:view>
</html>

5. Primefaces AutoComplete + completeMethod Demo

The below snapshot shows you the using of autoComplete primefaces component for rendering a suggestions for the end user that tries to type message.

AutoComplete Filling Suggestions Using completeMethod

Comments

comments

About Amr Mohammed

Speak Your Mind

*