AutoComplete

AutoComplete displays suggestions while the input is being type. AutoComplete features various options, customizable content, multiple selection, effects and events.

Documentation

<style type="text/css">
    .ui-datalist .ui-datalist-content {
        border:0 none
    }

    .ui-datalist ul {
        padding: 0px 10px 0 20px;
        margin: 5px 0;
    }

    .value {
        font-weight: bold;
    }

    .ui-autocomplete-itemtip {
        -moz-box-sizing: content-box;
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
    }
</style>


<h:form>
    <p:growl id="msgs" showDetail="true" skipDetailIfEqualsSummary="true" />

    <h:panelGrid columns="2" cellpadding="5">
        <p:outputLabel value="Simple:" for="acSimple" />
        <p:autoComplete id="acSimple" value="#{autoCompleteView.txt1}" completeMethod="#{autoCompleteView.completeText}" />

        <p:outputLabel value="Min Length (3):" for="acMinLength" />
        <p:autoComplete id="acMinLength" minQueryLength="3" value="#{autoCompleteView.txt2}" completeMethod="#{autoCompleteView.completeText}" effect="fade" />

        <p:outputLabel value="Delay(1000):" for="acDelay" />
        <p:autoComplete id="acDelay" queryDelay="1000" value="#{autoCompleteView.txt3}" completeMethod="#{autoCompleteView.completeText}" effect="blind" />

        <p:outputLabel value="Max Results(5):" for="acMaxResults" />
        <p:autoComplete id="acMaxResults" maxResults="5" value="#{autoCompleteView.txt4}" completeMethod="#{autoCompleteView.completeText}" />

        <p:outputLabel value="Force Selection:" for="acForce" />
        <p:autoComplete id="acForce" forceSelection="true" value="#{autoCompleteView.txt5}" completeMethod="#{autoCompleteView.completeText}" />

        <p:outputLabel value="DropDown:" for="dd" />
        <p:autoComplete id="dd" dropdown="true" value="#{autoCompleteView.txt6}" completeMethod="#{autoCompleteView.completeText}" />

        <p:outputLabel value="Cache:" for="cache" />
        <p:autoComplete id="cache" cache="true" cacheTimeout="30000" value="#{autoCompleteView.txt7}" completeMethod="#{autoCompleteView.completeText}" />

        <p:outputLabel value="Select Event:" for="event" />
        <p:autoComplete id="event" value="#{autoCompleteView.txt8}" completeMethod="#{autoCompleteView.completeText}">
            <p:ajax event="itemSelect" listener="#{autoCompleteView.onItemSelect}" update="msgs" />
        </p:autoComplete>

        <p:outputLabel value="Pojo:" for="themePojo" />
        <p:autoComplete id="themePojo" value="#{autoCompleteView.theme1}" completeMethod="#{autoCompleteView.completeTheme}"
                        var="theme" itemLabel="#{theme.displayName}" itemValue="#{theme}" converter="#{themeConverter}" forceSelection="true" />

        <p:outputLabel value="Custom Content:" for="themeCustom" />
        <p:autoComplete id="themeCustom" value="#{autoCompleteView.theme2}" completeMethod="#{autoCompleteView.completeTheme}"
                        var="theme" itemLabel="#{theme.displayName}" itemValue="#{theme}" converter="#{themeConverter}" forceSelection="true">
            <p:column>
                <h:graphicImage name="showcase/images/themeswitcher/themeswitcher-#{theme.name}.png" alt="#{theme.name}" styleClass="ui-theme"/>
            </p:column>

            <p:column>
                <h:outputText value="#{theme.displayName}" />
            </p:column>
        </p:autoComplete>

        <p:outputLabel value="Multiple:" for="themes" />
        <p:autoComplete id="themes" multiple="true" value="#{autoCompleteView.selectedThemes}" completeMethod="#{autoCompleteView.completeTheme}"
                        var="theme" itemLabel="#{theme.displayName}" itemValue="#{theme}" converter="#{themeConverter}" forceSelection="true">
            <p:column style="width:10%">
                <h:graphicImage name="showcase/images/themeswitcher/themeswitcher-#{theme.name}.png" alt="#{theme.name}" styleClass="ui-theme"/>
            </p:column>

            <p:column>
                <h:outputText value="#{theme.displayName}" />
            </p:column>
        </p:autoComplete>

        <p:outputLabel value="Itemtip:" for="itemTip" />
        <p:autoComplete id="itemTip" value="#{autoCompleteView.theme3}" completeMethod="#{autoCompleteView.completeTheme}"
                        var="theme" itemLabel="#{theme.displayName}" itemValue="#{theme}" converter="#{themeConverter}">
            <f:facet name="itemtip">
                <h:panelGrid columns="2" cellpadding="5">
                    <f:facet name="header">
                        <h:graphicImage name="showcase/images/themeswitcher/themeswitcher-#{theme.name}.png" alt="#{theme.name}" styleClass="ui-theme" />
                    </f:facet>

                    <h:outputText value="Display:" />
                    <h:outputText value="#{theme.displayName}" />

                    <h:outputText value="Key" />
                    <h:outputText value="#{theme.name}" />
                </h:panelGrid>
            </f:facet>
        </p:autoComplete>

        <p:outputLabel value="Group:" for="group" />
        <p:autoComplete id="group" value="#{autoCompleteView.theme4}" completeMethod="#{autoCompleteView.completeThemeContains}"
                        var="theme" itemLabel="#{theme.displayName}" itemValue="#{theme}" converter="#{themeConverter}" forceSelection="true"
                        groupBy="#{autoCompleteView.getThemeGroup(theme)}" scrollHeight="250"/>
    </h:panelGrid>

    <p:commandButton value="Submit" icon="pi pi-check" update="output msgs" oncomplete="PF('dlg').show()" />

    <p:dialog header="Values" resizable="false" showEffect="fade" widgetVar="dlg">
        <p:panelGrid id="output" columns="2" columnClasses="label, value">
            <h:outputText value="Simple:" />
            <h:outputText value="#{autoCompleteView.txt1}" />

            <h:outputText value="Min Length" />
            <h:outputText value="#{autoCompleteView.txt2}" />

            <h:outputText value="Delay:" />
            <h:outputText value="#{autoCompleteView.txt3}" />

            <h:outputText value="Max Results:" />
            <h:outputText value="#{autoCompleteView.txt4}" />

            <h:outputText value="Force Selection:" />
            <h:outputText value="#{autoCompleteView.txt5}" />

            <h:outputText value="Dropdown:" />
            <h:outputText value="#{autoCompleteView.txt6}" />

            <h:outputText value="Cache:" />
            <h:outputText value="#{autoCompleteView.txt7}" />

            <h:outputText value="Select Event:" />
            <h:outputText value="#{autoCompleteView.txt8}" />

            <h:outputText value="Pojo:" />
            <h:outputText value="#{autoCompleteView.theme1}" />

            <h:outputText value="Custom Content:" />
            <h:outputText value="#{autoCompleteView.theme2}" />

            <h:outputText value="Multiple:" />
            <p:dataList value="#{autoCompleteView.selectedThemes}" var="t">
                <h:outputText value="#{t}" />
            </p:dataList>

            <h:outputText value="Itemtip:" />
            <h:outputText value="#{autoCompleteView.theme3}" />
        </p:panelGrid>
    </p:dialog>
</h:form>

@Named
@RequestScoped
public class AutoCompleteView {
    
    private String txt1;
    private String txt2;
    private String txt3;
    private String txt4;
    private String txt5;
    private String txt6;
    private String txt7;
    private String txt8;
    private Theme theme1;
    private Theme theme2;
    private Theme theme3;
    private Theme theme4;
    private List<Theme> selectedThemes;
    
    @Inject
    private ThemeService service;
    
    public List<String> completeText(String query) {
		List<String> results = new ArrayList<>();
		for(int i = 0; i < 10; i++) {
			results.add(query + i);
		}
		
		return results;
	}
    
    public List<Theme> completeTheme(String query) {
        String queryLowerCase = query.toLowerCase();
        List<Theme> allThemes = service.getThemes();
        return allThemes.stream().filter(t -> t.getName().toLowerCase().startsWith(queryLowerCase)).collect(Collectors.toList());
	}
    
    public List<Theme> completeThemeContains(String query) {
        String queryLowerCase = query.toLowerCase();
        List<Theme> allThemes = service.getThemes();
        return allThemes.stream().filter(t -> t.getName().toLowerCase().contains(queryLowerCase)).collect(Collectors.toList());
	}
        
    public void onItemSelect(SelectEvent<String> event) {
        FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Item Selected", event.getObject()));
    }

    public String getTxt1() {
        return txt1;
    }

    public void setTxt1(String txt1) {
        this.txt1 = txt1;
    }

    public String getTxt2() {
        return txt2;
    }

    public void setTxt2(String txt2) {
        this.txt2 = txt2;
    }

    public String getTxt3() {
        return txt3;
    }

    public void setTxt3(String txt3) {
        this.txt3 = txt3;
    }

    public String getTxt4() {
        return txt4;
    }

    public void setTxt4(String txt4) {
        this.txt4 = txt4;
    }

    public String getTxt5() {
        return txt5;
    }

    public void setTxt5(String txt5) {
        this.txt5 = txt5;
    }

    public String getTxt6() {
        return txt6;
    }

    public void setTxt6(String txt6) {
        this.txt6 = txt6;
    }

    public String getTxt7() {
        return txt7;
    }

    public void setTxt7(String txt7) {
        this.txt7 = txt7;
    }

    public String getTxt8() {
        return txt8;
    }

    public void setTxt8(String txt8) {
        this.txt8 = txt8;
    }

    public Theme getTheme1() {
        return theme1;
    }

    public void setTheme1(Theme theme1) {
        this.theme1 = theme1;
    }

    public Theme getTheme2() {
        return theme2;
    }

    public void setTheme2(Theme theme2) {
        this.theme2 = theme2;
    }

    public Theme getTheme3() {
        return theme3;
    }

    public void setTheme3(Theme theme3) {
        this.theme3 = theme3;
    }

    public Theme getTheme4() {
        return theme4;
    }

    public void setTheme4(Theme theme4) {
        this.theme4 = theme4;
    }

    public List<Theme> getSelectedThemes() {
        return selectedThemes;
    }

    public void setSelectedThemes(List<Theme> selectedThemes) {
        this.selectedThemes = selectedThemes;
    }
    
    public void setService(ThemeService service) {
        this.service = service;
    }
    
    public char getThemeGroup(Theme theme) {
        return theme.getDisplayName().charAt(0);
    }
}

public class Theme {

    private int id;    
    private String displayName; 
    private String name;
    
    public Theme() {}

    public Theme(int id, String displayName, String name) {
        this.id = id;
        this.displayName = displayName;
        this.name = name;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getDisplayName() {
        return displayName;
    }

    public void setDisplayName(String displayName) {
        this.displayName = displayName;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
    
    @Override
    public String toString() {
        return name;
    }
}

@Named
@ApplicationScoped
public class ThemeService {
    
    private List<Theme> themes;
    
    @PostConstruct
    public void init() {
        themes = new ArrayList<>();
        themes.add(new Theme(0, "Nova-Light", "nova-light"));
        themes.add(new Theme(1, "Nova-Dark", "nova-dark"));
        themes.add(new Theme(2, "Nova-Colored", "nova-colored"));
        themes.add(new Theme(3, "Luna-Blue", "luna-blue"));
        themes.add(new Theme(4, "Luna-Amber", "luna-amber"));
        themes.add(new Theme(5, "Luna-Green", "luna-green"));
        themes.add(new Theme(6, "Luna-Pink", "luna-pink"));
        themes.add(new Theme(7, "Omega", "omega"));
    }
    
    public List<Theme> getThemes() {
        return themes;
    } 
}

@Named
@FacesConverter(value = "themeConverter", managed = true)
public class ThemeConverter implements Converter {

    @Inject private ThemeService themeService;
    
    @Override
    public Object getAsObject(FacesContext fc, UIComponent uic, String value) {
        if(value != null && value.trim().length() > 0) {
            try {
                return themeService.getThemes().get(Integer.parseInt(value));
            } catch(NumberFormatException e) {
                throw new ConverterException(new FacesMessage(FacesMessage.SEVERITY_ERROR, "Conversion Error", "Not a valid theme."));
            }
        }
        else {
            return null;
        }
    }

    @Override
    public String getAsString(FacesContext fc, UIComponent uic, Object object) {
        if(object != null) {
            return String.valueOf(((Theme) object).getId());
        }
        else {
            return null;
        }
    }   
}

FREE THEMES

Built-in component themes created by the PrimeFaces Theme Designer.

Nova-Light

Nova-Dark

Nova-Colored

Luna-Blue

Luna-Amber

Luna-Green

Luna-Pink

Omega

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.

Simple:
Min Length (3):
Delay(1000):
Max Results(5):
Force Selection:
DropDown:
Cache:
Select Event:
Pojo:
Custom Content:
Multiple:
Itemtip:
Group:

Simple:
Min Length
Delay:
Max Results:
Force Selection:
Dropdown:
Cache:
Select Event:
Pojo:
Custom Content:
Multiple:	No records found.
Itemtip: