PrimeFaces AutoComplete + AjaxBehavior Example

Instead of waiting for user to submit the form manually to process the selected item, you can enable instant ajax selection by using the itemSelect ajax behavior. Let’s you consider the AutoComplete that gives you set of players to select one among of them, such that behavior can be ajaxified by eliminating the needs for submission.

Read : PrimeFaces Tutorials

1. 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 afterPhase="#{autoComplete.phaseListener}">
		<h:form prependId="false">
			<h1>JavaBeat Primefaces Example</h1>
			<h2>Primefaces - AutoComplete + Ajax Behavior</h2>
			<h:outputText value="Enter name of the player you wish to see statistics for :"/>
			#{' '}
			<p:autoComplete id="auto" value="#{autoComplete.players}"
								completeMethod="#{autoComplete.complete}"
								var="player"
								itemValue="#{player}"
								itemLabel="#{player.playerName}"
								converter="#{playerConverter}"
								multiple="true">
				<p:ajax event="itemSelect" listener="#{autoComplete.handleSelect}" update="msg"></p:ajax>
				<p:ajax event="itemUnselect" listener="#{autoComplete.handleUnSelect}" update="msg"></p:ajax>
			</p:autoComplete>
			<br/>
			<p:messages id="msg"/>
		</h:form>
	</f:view>
</html>

2. The Managed Bean

AutoComplete.java

package net.javabeat.primefaces;

import java.util.List;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
import javax.faces.event.PhaseEvent;

import net.javabeat.primefaces.data.Player;
import net.javabeat.primefaces.util.PlayerDataSource;

import org.primefaces.event.SelectEvent;
import org.primefaces.event.UnselectEvent;

@ManagedBean
@SessionScoped
public class AutoComplete {
	@ManagedProperty("#{playerDataSource}")
	private PlayerDataSource ds;

	private List<Player> players;

	public AutoComplete (){

	}

	public List<Player> complete(String query){
		// Assumed Datasource
		return ds.queryByName(query);
	}

	public List<Player> getPlayers() {
		return players;
	}

	public void setPlayers(List<Player> players) {
		this.players = players;
	}

	public PlayerDataSource getDs() {
		return ds;
	}

	public void setDs(PlayerDataSource ds) {
		this.ds = ds;
	}

	public void handleSelect(SelectEvent e){
		Player p = (Player)e.getObject();
		FacesContext.getCurrentInstance().addMessage(null,
				new FacesMessage(FacesMessage.SEVERITY_INFO,
					"Add Player :: Player Info: ID :: "+ p.getPlayerId() + " :: Name :: "+p.getPlayerName(),""));
	}

	public void handleUnSelect(UnselectEvent e){
		Player p = (Player)e.getObject();
		FacesContext.getCurrentInstance().addMessage(null,
				new FacesMessage(FacesMessage.SEVERITY_WARN,
					"Remove Player :: Player Info: ID :: "+ p.getPlayerId() + " :: Name :: "+p.getPlayerName(),""));
	}

	public void phaseListener(PhaseEvent e){
		List<FacesMessage> messages = e.getFacesContext().getMessageList();
		System.out.println(messages.size());
	}

}

3. The Converter

PlayerConveter.java

package net.javabeat.primefaces.converter;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.RequestScoped;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.convert.Converter;
import javax.faces.convert.FacesConverter;

import net.javabeat.primefaces.data.Player;
import net.javabeat.primefaces.util.PlayerDataSource;
//To be considered by the JavaServer Faces As Managed Bean
// & Make the converter Eligible for use @ManagedProperty
@ManagedBean
@RequestScoped
@FacesConverter
public class PlayerConverter implements Converter{
	@ManagedProperty(value="#{playerDataSource}")
	private PlayerDataSource ds;

	public PlayerDataSource getDs() {
		return ds;
	}

	public void setDs(PlayerDataSource ds) {
		this.ds = ds;
	}

	@Override
	public Object getAsObject(FacesContext context, UIComponent component,String value) {
		for(Player p : ds.getPlayers()){
			if(p.getPlayerId().equals(value)){
				return p;
			}
		}
		return null;
	}

	@Override
	public String getAsString(FacesContext context, UIComponent component,Object value) {
		if(value instanceof Player){
			Player player = (Player)value;
			return player.getPlayerId();
		}
		return "";
	}

}

4. The Datasource

PlayerDataSource

package net.javabeat.primefaces.util;

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

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

import net.javabeat.primefaces.data.Player;
@ManagedBean
@SessionScoped
public class PlayerDataSource {
	public List<Player> players = new ArrayList<Player>();

	public PlayerDataSource(){
		// Assumed Player
		Player player = new Player();
		player.setPlayerId("1");
		player.setPlayerName("Anderias Muller");
		player.setPlayerPosition("CF");
		player.setPlayerAge("24");

		// Add Player
		players.add(player);

		// Assumed Player
		player = new Player();
		player.setPlayerId("2");
		player.setPlayerName("Olaf Thon");
		player.setPlayerPosition("CM");
		player.setPlayerAge("29");

		// Add Player
		players.add(player);

		// Assumed Player
		player = new Player();
		player.setPlayerId("3");
		player.setPlayerName("Oliver Khan");
		player.setPlayerPosition("GK");
		player.setPlayerAge("31");

		// Add Player
		players.add(player);

	}

	public List<Player> getPlayers() {
		return players;
	}

	public void setPlayers(List<Player> players) {
		this.players = players;
	}

	public List<Player> queryByName(String name){
		// Assumed search using the startsWith
		List<Player> queried = new ArrayList<Player>();
		for(Player player: this.players){
			if(player.getPlayerName().startsWith(name)){
				queried.add(player);
			}
		}
		return queried;
	}

}

5. Player Data Type (Pojo)

Player.java

package net.javabeat.primefaces.data;

public class Player {
	private String playerId;
	private String playerName;
	private String playerPosition;
	private String playerAge;

	public String getPlayerId() {
		return playerId;
	}
	public void setPlayerId(String playerId) {
		this.playerId = playerId;
	}
	public String getPlayerName() {
		return playerName;
	}
	public void setPlayerName(String playerName) {
		this.playerName = playerName;
	}
	public String getPlayerPosition() {
		return playerPosition;
	}
	public void setPlayerPosition(String playerPosition) {
		this.playerPosition = playerPosition;
	}
	public String getPlayerAge() {
		return playerAge;
	}
	public void setPlayerAge(String playerAge) {
		this.playerAge = playerAge;
	}

	public boolean equals(Object obj){
		if(obj instanceof Player){
			Player player = (Player)obj;
			if(this.playerId.equals(player.getPlayerId())){
				return true;
			}
		}
		return false;
	}

	public int hashCode(){
		return this.playerId.hashCode();
	}

}

6. AutoComplete Events

Your listener (if defined) will be invoked with org.primefaces.event.Select instance that contains a reference to the selected item and org.primefaces.event.UnselectEvent instance that contains a reference to the unselected item once you’ve selected and removed items, respectively. Note that autoComplete also supports events inherited from regular input text such as blur, focus, mouseover in addition to itemSelect.