Locale

Change the locale of the datepicker, schedule and client side validation messages.

Language
English
English
English
French
German
German
German
Italian
Korean
Spanish
Catalan
Dutch
Portuguese
Portuguese
Arabic
Arabic
Bulgarian
Bangla
Bosnian
Czech
Greek
Estonian
Persian
Finnish
Danish
Hindi
Indonesian
Icelandic
Croatian
Japanese
Hungarian
Hebrew
Georgian
Central Kurdish
Khmer
Kyrgyz
Kazakh
Lithuanian
Latvian
Malay
Norwegian
Polish
Romanian
Russian
Slovak
Slovenian
Serbian
Serbian
Swedish
Thai
Turkish
Ukrainian
Uzbek
Vietnamese
Chinese
Chinese

Input Style

Themes

PrimeUIX
Aura Light Emerald Aura Light Emerald
Aura Dark Emerald Aura Dark Emerald
PrimeOne
Saga Blue Saga Blue
Vela Blue Vela Blue
Arya Blue Arya Blue
Bootstrap
Bootstrap Blue Light Bootstrap Blue Light
Bootstrap Purple Light Bootstrap Purple Light
Bootstrap Blue Dark Bootstrap Blue Dark
Bootstrap Purple Dark Bootstrap Purple Dark
Material Design
Material Indigo Light Material Indigo Light
Material Deep Purple Light Material Deep Purple Light
Material Indigo Dark Material Indigo Dark
Material Deep Purple Dark Material Deep Purple Dark
Material Design Compact
Material Compact Indigo Light Material Compact Indigo Light
Material Compact Deep Purple Light Material Compact Deep Purple Light
Material Compact Indigo Dark Material Compact Indigo Dark
Material Compact Deep Purple Dark Material Compact Deep Purple Dark
Legacy
Nova Light Nova Light
Nova Dark Nova Dark
Nova Colored Nova Colored
Luna Amber Luna Amber
Luna Blue Luna Blue
Luna Green Luna Green
Luna Pink Luna Pink

AutoComplete

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

AutoComplete Tag Documentation

AutoComplete is a component that provides live suggestions while an input is being typed.

NameTypeRequiredDefaultDescription
ariaLabelledBy String false
submittedValue Object false
accesskey String false Access key to transfer focus to the input element.
label String false A localized user presentable name.
alt String false Alternate textual description of the input field.
valueChangeListener ValueChangeListener false A method binding expression referring to a method for handling a valuchangeevent.
validator Validator false A method expression referring to a method validating the input.
binding UIComponent false generated An EL expression referring to a server side UIComponent instance in a backing bean.
rendered boolean false true Boolean value to specify the rendering of the component, when set to false component will not be rendered.
autocomplete String false Controls browser autocomplete behavior. Possible values are 'on', 'off', and 'new-password'.
itemStyleClass String false CSS class for each item.
inputStyleClass String false CSS class for the input element.
panelStyleClass String false CSS class for the suggestions panel.
highlightSelector String false CSS selector for highlighting matched text.
converterMessage String false Custom message to display when conversion fails.
requiredMessage String false Custom message to display when the required validation fails.
validatorMessage String false Custom message to display when validation fails.
maxlength int false Integer.MIN_VALUE Defines the maximum number of characters allowed in the input.
role String false Defines the role of the element for accessibility purposes.
queryDelay int false 300 Delay in milliseconds before triggering autocomplete query.
dir String false ltr Direction indication for text that does not inherit directionality.
dropdownMode String false Dropdown mode. Options: 'current', 'blank'.
converter Converter false EL expression resolves to a converter instance or literal converter ID defining a component converter.
completeEndpoint String false Endpoint URL for REST-based autocomplete.
queryEvent String false Event to trigger autocomplete query.
lazyField String false Field name for lazy model filtering.
onmousedown String false Fires when a mouse button is pressed down on an element.
onmouseup String false Fires when a mouse button is released over an element.
onclick String false Fires when a mouse click on the element.
ondblclick String false Fires when a mouse double-click on the element.
onfocus String false Fires when an element gets focus.
onblur String false Fires when an element loses focus.
onkeydown String false Fires when a user is pressing a key.
onkeypress String false Fires when a user presses a key.
onkeyup String false Fires when a user releases a key.
onmousemove String false Fires when the mouse pointer is moving while it is over an element.
onmouseover String false Fires when the mouse pointer moves onto an element.
onmouseout String false Fires when the mouse pointer moves out of an element.
onchange String false Fires when the value of an element has been changed.
ariaDescribedBy String false Identifies the element(s) that describe the object, enhancing accessibility.
valid boolean false true Indicates whether the input's value is valid.
localValueSet boolean false false Indicates whether the local value of the component has been set.
inputStyle String false Inline style for the input element.
panelStyle String false Inline style for the suggestions panel.
type String false text Input field type.
lazyModel LazyDataModel false LazyDataModel for lazy loading suggestions.
required boolean false false Marks component as required.
scrollHeight int false 2147483647 Maximum height in pixels before scrolling is enabled.
selectLimit int false 2147483647 Maximum number of items that can be selected.
maxResults int false 2147483647 Maximum number of results to display.
emptyMessage String false Message to display when no suggestions are available.
completeMethod MethodExpression false MethodExpression to provide suggestions for autocomplete functionality.
minQueryLength int false 1 Minimum number of characters to trigger autocomplete query.
widgetVar String false generated ('widget_' + componentClientId) Name of the client side widget.
var String false Name of the iterator variable used in itemLabel and itemValue.
size int false Integer.MIN_VALUE Number of characters used to determine the width of the input element.
itemtipMyPosition String false Position of the item tooltip relative to the item.
itemtipAtPosition String false Position of the item tooltip relative to the target.
my String false left top Position of the panel relative to the input.
at String false left bottom Position of the panel relative to the target.
groupBy Object false Property to group suggestions by.
itemLabel String false Property to use for displaying items.
itemValue Object false Property to use for item value.
queryMode String false server Query mode. Options: 'server', 'client', 'hybrid'.
ondragend String false Script to execute at the end of a drag operation.
ondragstart String false Script to execute at the start of a drag operation.
ondragenter String false Script to execute when a dragged element enters a valid drop target.
ondrop String false Script to execute when a dragged element is dropped.
ondragover String false Script to execute when a dragged element is over a valid drop target.
ondragleave String false Script to execute when a dragged element leaves a valid drop target.
ondrag String false Script to execute when an element is dragged.
onsearch String false Script to execute when a search is performed.
oncopy String false Script to execute when content is copied from the element.
oncut String false Script to execute when content is cut from the element.
onpaste String false Script to execute when content is pasted into the element.
onselect String false Script to execute when text is selected.
oncontextmenu String false Script to execute when the context menu is triggered.
oninvalid String false Script to execute when the element's value is invalid.
onscroll String false Script to execute when the element is scrolled.
oninput String false Script to execute when the element receives user input.
onreset String false Script to execute when the form is reset.
onwheel String false Script to execute when the mouse wheel is used.
appendTo String false @(body) Search expression to append the panel to.
style String false Specifies an inline CSS style for an element.
placeholder String false Specifies a short hint describing the expected value of the input.
title String false Specifies extra information about an element (displayed as a tooltip).
styleClass String false Specifies one or more CSS class names for an element.
disabled boolean false false Specifies that an element should be disabled.
readonly boolean false false Specifies that an input field is read-only.
lang String false Specifies the language of the element's content.
tabindex String false Specifies the tab order of an element.
inputmode String false Specifies the type of data expected in the input, aiding virtual keyboards.
dropdownTabindex String false Tabindex for the dropdown button.
moreText String false ... Text to display when there are more results.
cacheTimeout int false 300000 Timeout in milliseconds for cached suggestions.
groupByTooltip String false Tooltip text for group headers.
id String false generated Unique identifier of the component in a namingContainer.
value Object false Value of the component.
multiple boolean false false When enabled, allows multiple selections.
autoHighlight boolean false true When enabled, automatically highlights first suggestion.
autoSelection boolean false true When enabled, automatically selects highlighted suggestion.
cache boolean false false When enabled, caches suggestions on client side.
active boolean false true When enabled, component is active.
escape boolean false true When enabled, escapes HTML in suggestions.
forceSelection boolean false false When enabled, forces selection from suggestions.
dynamic boolean false false When enabled, loads suggestions dynamically.
unique boolean false false When enabled, prevents duplicate selections.
dropdown boolean false false When enabled, shows dropdown button.
showEmptyMessage boolean false true When enabled, shows empty message when no suggestions.
immediate boolean false false When set true, process validations logic is executed at apply request values phase for this component.
Loading...
Tag DocumentationNew DocumentationNew Documentation JSDoc
Single
Multiple

Usage


<div class="card ui-fluid ">
    <h:form>
        <p:growl id="msgs" showDetail="true" skipDetailIfEqualsSummary="true"/>

        <h5 class="mt-0">Single</h5>
        <div class="formgrid grid">
            <div class="field col-12 md:col-4">
                <p:outputLabel value="Simple" for="@next"/>
                <p:autoComplete id="acSimple" value="#{autoCompleteView.txt1}"
                                completeMethod="#{autoCompleteView.completeText}" scrollHeight="250"/>
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel value="Min Length (3)" for="@next"/>
                <p:autoComplete id="acMinLength" minQueryLength="3" value="#{autoCompleteView.txt2}"
                                completeMethod="#{autoCompleteView.completeText}" effect="fade" scrollHeight="250"/>
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel value="Delay(1000)" for="@next"/>
                <p:autoComplete id="acDelay" queryDelay="1000" value="#{autoCompleteView.txt3}"
                                completeMethod="#{autoCompleteView.completeText}" effect="blind" scrollHeight="250"/>
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel value="Max Results(5)" for="@next"/>
                <p:autoComplete id="acMaxResults" maxResults="5" value="#{autoCompleteView.txt4}"
                                completeMethod="#{autoCompleteView.completeText}" scrollHeight="250"
                                moreText="more items available">
                    <p:ajax event="moreTextSelect" listener="#{autoCompleteView.onMoreTextSelect}"
                            update="msgs"/>
                </p:autoComplete>
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel value="Force Selection" for="@next"/>
                <p:autoComplete id="acForce" forceSelection="true" value="#{autoCompleteView.txt5}"
                                completeMethod="#{autoCompleteView.completeText}" scrollHeight="250"/>
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel value="DropDown" for="@next"/>
                <p:autoComplete id="dd" dropdown="true" value="#{autoCompleteView.txt6}"
                            completeMethod="#{autoCompleteView.completeText}" scrollHeight="250"/>
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel value="Cache" for="@next"/>
                <p:autoComplete id="cache" cache="true" cacheTimeout="30000" value="#{autoCompleteView.txt7}"
                                completeMethod="#{autoCompleteView.completeText}" scrollHeight="250"/>
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel value="Select Event" for="@next"/>
                <p:autoComplete id="event" value="#{autoCompleteView.txt8}"
                                completeMethod="#{autoCompleteView.completeText}" scrollHeight="250">
                    <p:ajax event="itemSelect" listener="#{autoCompleteView.onItemSelect}" update="msgs"/>
                </p:autoComplete>
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel value="Pojo" for="@next"/>
                <p:autoComplete id="pojo" value="#{autoCompleteView.country1}"
                                completeMethod="#{autoCompleteView.completeCountry}"
                                var="country" itemLabel="#{country.name}" itemValue="#{country}"
                                converter="#{countryConverter}" forceSelection="true" scrollHeight="250"/>
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel value="Pojo (via REST)" for="pojoRest"/>
                <p:autoComplete id="pojoRest" widgetVar="countryPojoRest" value="#{autoCompleteView.country5}"
                                var="country" itemLabel="#{country.displayName}" itemValue="#{country}"
                                converter="#{countryConverter}"
                                completeEndpoint="#{request.contextPath}/rest/country/autocomplete"
                                forceSelection="true"
                                scrollHeight="250"/>
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel value="LazyModel" for="lazyModel"/>
                <p:autoComplete id="lazyModel" widgetVar="lazyModel" value="#{autoCompleteView.txt11}"
                                var="customer" itemLabel="#{customer.name}" itemValue="#{customer.name}"
                                lazyModel="#{autoCompleteView.lazyModel}" lazyField="name"
                                forceSelection="true"
                                maxResults="10"/>
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel value="Custom Content" for="@next"/>
                <p:autoComplete id="countryCustom" value="#{autoCompleteView.country2}"
                                completeMethod="#{autoCompleteView.completeCountry}"
                                var="country" itemLabel="#{country.name}" itemValue="#{country}"
                                converter="#{countryConverter}" forceSelection="true" scrollHeight="250">
                    <p:column>
                        <span class="flag flag-#{country.code}" style="width: 30px; height: 20px"/>
                        <h:outputText style="vertical-align: middle; margin-left: .5rem" value="#{country.name}"/>
                    </p:column>
                </p:autoComplete>
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel value="Itemtip" for="@next"/>
                <p:autoComplete id="itemTip" value="#{autoCompleteView.country3}"
                                completeMethod="#{autoCompleteView.completeCountry}"
                                var="country" itemLabel="#{country.name}" itemValue="#{country}"
                                converter="#{countryConverter}" scrollHeight="250">
                    <f:facet name="itemtip">
                        <h:panelGrid columns="2" cellpadding="5">
                            <f:facet name="header">
                                <span class="flag flag-#{country.code}" style="width: 30px; height: 20px"/>
                            </f:facet>

                            <h:outputText value="Name"/>
                            <h:outputText value="#{country.name}"/>

                            <h:outputText value="Code"/>
                            <h:outputText value="#{country.code}"/>
                        </h:panelGrid>
                    </f:facet>
                </p:autoComplete>
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel value="Group" for="@next"/>
                <p:autoComplete id="group" value="#{autoCompleteView.country4}"
                                completeMethod="#{autoCompleteView.completeCountry}"
                                var="country" itemLabel="#{country.name}" itemValue="#{country}"
                                converter="#{countryConverter}" forceSelection="true"
                                groupBy="#{autoCompleteView.getCountryGroup(country)}" escape="false" scrollHeight="250"/>
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel value="Footer" for="@next"/>
                <p:autoComplete id="acFooter" value="#{autoCompleteView.txt10}"
                                completeMethod="#{autoCompleteView.completeText}"
                                maxResults="10">
                    <f:facet name="footer">
                        <div class="ui-fluid" style="padding:0.5rem 1rem 1rem 1rem">
                            <p:button value="Add new" onclick="alert('This could open a dialog')"/>
                        </div>
                    </f:facet>
                </p:autoComplete>
            </div>
        </div>

        <h5>Multiple</h5>
        <p:autoComplete id="countries" multiple="true" value="#{autoCompleteView.selectedCountries}"
                        completeMethod="#{autoCompleteView.completeCountry}" showEmptyMessage="false"
                        var="country" itemLabel="#{country.name}" itemValue="#{country}"
                        converter="#{countryConverter}" forceSelection="false" scrollHeight="250">
            <p:column>
                <span class="flag flag-#{country.code}" style="width: 30px; height: 20px" />
                <h:outputText style="vertical-align: middle; margin-left: .5rem" value="#{country.name}"/>
            </p:column>
        </p:autoComplete>
    </h:form>
</div>