AutoComplete

AutoComplete is used by defining a server side complete method that returns the suggestions.

AutoComplete

Values
Value 1:
Value 2:
Value 3:
Value 4:
Value 5:
Value 6:
Value 7:

Source

<h:form id="form">
	<p:panel header="AutoComplete" toggleable="true" id="panel">
		<h:panelGrid columns="2" cellpadding="5">
		
			<h:outputLabel value="Simple :" for="acSimple" />
			<p:autoComplete id="acSimple" value="#{autoCompleteBean.txt1}" 
					completeMethod="#{autoCompleteBean.complete}"/>
			
			<h:outputLabel value="Min Length (3) :" for="acMinLength" />
			<p:autoComplete id="acMinLength" minQueryLength="3" 
					value="#{autoCompleteBean.txt2}" effect="fade"
					completeMethod="#{autoCompleteBean.complete}"/>
			
			<h:outputLabel value="Delay(1000) :" for="acDelay" />
			<p:autoComplete id="acDelay" queryDelay="1000" 
					value="#{autoCompleteBean.txt3}" effect="blind"
					completeMethod="#{autoCompleteBean.complete}"/>
					
			<h:outputLabel value="Max Results(5) :" for="acMaxResults" />
			<p:autoComplete id="acMaxResults" maxResults="5" 
					value="#{autoCompleteBean.txt4}" 
					completeMethod="#{autoCompleteBean.complete}"/>
			
			<h:outputLabel value="Force Selection :" for="acForce" />
			<p:autoComplete id="acForce" forceSelection="true" 
					value="#{autoCompleteBean.txt5}" 
					completeMethod="#{autoCompleteBean.complete}"/>

            <h:outputLabel value="DropDown :" for="dd" />
            <p:autoComplete id="dd" dropdown="true" value="#{autoCompleteBean.txt6}" 
                    completeMethod="#{autoCompleteBean.complete}" />
            
            <h:outputLabel value="Cache :" for="cache" />
			<p:autoComplete id="cache" cache="true" cacheTimeout="30000" 
                    value="#{autoCompleteBean.txt7}" completeMethod="#{autoCompleteBean.complete}"/>
			
		</h:panelGrid>
	</p:panel>
	
	<p:commandButton value="Submit" id="submit" update="display" oncomplete="PF('dialog').show()" />
	
	<p:dialog header="Values" widgetVar="dialog"
			showEffect="fold" hideEffect="fold" width="200">
			
         <h:panelGrid id="display" columns="2" cellpadding="5">
			<h:outputText value="Value 1: " />
			<h:outputText value="#{autoCompleteBean.txt1}" /> 
			
			<h:outputText value="Value 2: " />
			<h:outputText value="#{autoCompleteBean.txt2}" /> 
			
			<h:outputText value="Value 3: " />
			<h:outputText value="#{autoCompleteBean.txt3}" /> 
			
			<h:outputText value="Value 4: " />
			<h:outputText value="#{autoCompleteBean.txt4}" /> 
			
			<h:outputText value="Value 5: " />
			<h:outputText value="#{autoCompleteBean.txt5}" /> 

            <h:outputText value="Value 6: " />
			<h:outputText value="#{autoCompleteBean.txt6}" /> 

            <h:outputText value="Value 7: " />
			<h:outputText value="#{autoCompleteBean.txt7}" />
		</h:panelGrid>
		
	</p:dialog>
             	
</h:form>