AutoComplete - Multiple Selection

AutoComplete supports multiple selection as well.

Basic Complete

Advanced Complete


Selected Values
Texts
No records found.

Players
No records found.

Source

<h:form id="form">
                
    <p:growl id="growl" />

    <h3>Basic Complete</h3>
    <p:autoComplete value="#{autoCompleteBean.selectedTexts}" completeMethod="#{autoCompleteBean.complete}" multiple="true"/>

    <h3>Advanced Complete</h3>
    <p:autoComplete value="#{autoCompleteBean.selectedPlayers}" completeMethod="#{autoCompleteBean.completePlayer}"
        var="p" itemLabel="#{p.name}" itemValue="#{p}" converter="player" multiple="true">

        <p:ajax event="itemUnselect" listener="#{autoCompleteBean.handleUnselect}" update="growl" />

        <p:column style="width:20%;text-align:center">
            <p:graphicImage value="/images/barca/#{p.photo}" width="40" height="50"/>
        </p:column>

        <p:column style="width:80%">
            #{p.name} - #{p.number}
        </p:column>
    </p:autoComplete>

    <p:separator style="margin-top:20px"/>

    <p:commandButton value="Submit" id="submit" update="display" style="margin:10px 0" oncomplete="PF('textDialog').show()" />

    <p:dialog modal="true" widgetVar="textDialog" showEffect="fade" width="200" resizable="false" header="Selected Values">
        <p:outputPanel id="display">
            <p:dataList value="#{autoCompleteBean.selectedTexts}" var="text"  id="texts">
                <f:facet name="header">
                    Texts
                </f:facet>
                 <h:outputText value="" id="text"/>
            </p:dataList>

            <p:separator style="margin:20px"/>

            <p:dataList value="#{autoCompleteBean.selectedPlayers1}" var="player" id="players">
                <f:facet name="header">
                    Players
                </f:facet>
                <h:outputText value="" id="player"/>
            </p:dataList>
        </p:outputPanel>
    </p:dialog>
</h:form>