AutoComplete primefaces component provides the developer a more powerful capability for adding a tool tip upon suggestions. Sometimes the developer want a more explanation about suggestions, something like descriptive text, images and so on. Primefaces provides additional facet for AutoComplete component, that facet has the name itemtip, Itemtip is an advanced built-in tooltip when mouse is over on suggested items. Content of the tooltip is defined via the itemtip facet.
At this tutorial you are going to use the itemtip as a way for giving more descriptive about the suggestions that the user could see.
- 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"> <f:facet name="itemtip"> <h:panelGrid> <f:facet name="header"> <h:graphicImage value="/resources/images/#{player.playerImage}"></h:graphicImage> </f:facet> <h:outputText value="Name: "/> <h:outputText value="#{player.playerName}"/> <h:outputText value="Position: "/> <h:outputText value="#{player.playerPosition}"/> </h:panelGrid> </f:facet> <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. 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. Player DataSource
PlayerDataSource.java
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"); player.setPlayerImage("am.png"); // Add Player players.add(player); // Assumed Player player = new Player(); player.setPlayerId("2"); player.setPlayerName("Olaf Thon"); player.setPlayerPosition("CM"); player.setPlayerAge("29"); player.setPlayerImage("ot.png"); // Add Player players.add(player); // Assumed Player player = new Player(); player.setPlayerId("3"); player.setPlayerName("Oliver Khan"); player.setPlayerPosition("GK"); player.setPlayerAge("31"); player.setPlayerImage("ok.png"); // 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; } }
4. The Converter
PlayerConverter.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 ""; } }
5. Player Pojo
Player.java
package net.javabeat.primefaces.data; public class Player { private String playerId; private String playerName; private String playerPosition; private String playerAge; private String playerImage; 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 String getPlayerImage() { return playerImage; } public void setPlayerImage(String playerImage) { this.playerImage = playerImage; } 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. Primefaces AutoComplete + ItemTip Demo
The below snapshot shows you how could add itemtip for the suggested options.