AutoComplete AutoComplete displays suggestions while the input is being type. AutoComplete features various options, customizable content, multiple selection, effects and events.
Values
Simple:
Min Length
Delay:
Max Results:
Force Selection:
Dropdown:
Cache:
Select Event:
Pojo:
Custom Content:
Multiple:
No records found.
Itemtip:
<h:form>
    <p:growl id="msgs" showDetail="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:outputText styleClass="ui-theme ui-theme-#{theme.name}" />
            </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:outputText styleClass="ui-theme ui-theme-#{theme.name}" />
            </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" forceSelection="true">
            <f:facet name="itemtip">
                <h:panelGrid columns="2" cellpadding="5">
                    <f:facet name="header">
                        <h:outputText styleClass="ui-theme ui-theme-#{theme.name}" style="margin-left:50px" />
                    </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"
                groupBy="#{autoCompleteView.getThemeGroup(theme)}" scrollHeight="250"/>
    </h:panelGrid>

    <p:commandButton value="Submit" icon="ui-icon-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>
                
PrimeTek, Copyright © 2015
All rights reserved.
Running PrimeFaces-6.0.16 on Mojarra-2.2.8.