• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

PrimeFaces AutoComplete + AjaxBehavior Example

April 15, 2014 //  by Amr Mohammed//  Leave a Comment

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.

7. Primefaces AutoComplete + AjaxBehavior Demo

AutoComplete AjaxBehavior Example 1

AutoComplete AjaxBehavior Example 2

AutoComplete AjaxBehavior Example 3

[wpdm_file id=68]

Category: JSFTag: PrimeFaces

About Amr Mohammed

Previous Post: « How To Preload Images In JavaScript
Next Post: How Much Faster Is Java 8? »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact