Theme
arya
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga
vela
Fuzzy Search
Fast SublimeText-like fuzzy search for JavaScript.
arya
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga
vela
Source

<style>
.ui-fuzzysearch-item b {
    color: red;
}
</style>

<h:panelGrid columns="2">
    <p:outputLabel value="Themes" for="@next"/>
    <pe:fuzzySearch id="txtTheme"
                    value="#{fuzzySearchController.selectedTheme}" 
                    label="Theme"
                    placeholder="Search theme" listItemsAtTheBeginning="true"
                    converter="themeConverter">
        <p:ajax event="change" listener="#{fuzzySearchController.onChange}" />
        <f:selectItems value="#{fuzzySearchController.themes}" var="theme" itemLabel="#{theme.name}" itemValue="#{theme}" />
    </pe:fuzzySearch>
    <p:spacer />
    <p:spacer />
    <p:outputLabel value="TimeZones" for="@next"/>
    <pe:fuzzySearch id="txtTimeZone" value="#{fuzzySearchController.selectedTimezone}" 
                    placeholder="Search timezones">
        <f:selectItems value="#{fuzzySearchController.timezones}" var="timezone" itemLabel="#{timezone}" itemValue="#{timezone}" />
    </pe:fuzzySearch>
    <p:spacer />
    <p:commandButton value="Submit" actionListener="#{fuzzySearchController.onSubmit}" update="messages" process="@form" icon="pi pi-check" />
</h:panelGrid>
            
Components and more
Use Cases
Documentation pe:fuzzySearch
Attributes (move mouse over the names to see data types)
Name Description
id Unique identifier of the component in a namingContainer.
rendered Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding An el expression referring to a server side UIComponent instance in a backing bean.
value Value of the component.
converter An el expression or a literal text that defines a converter for the component. When it's an EL expression, it's resolved to a converter instance. In case it's a static text, it must refer to a converter id.
immediate When set true, process validations logic is executed at apply request values phase for this component. Default is false.
required Marks component as required.
validator A method expression referring to a method validationg the input.
valueChangeListener A method binding expression referring to a method for handling a valuchangeevent.
requiredMessage Message to display when required field validation fails.
converterMessage Message to display when conversion fails.
validatorMessage Message to display when validation fails.
widgetVar Name of the client side widget.
disabled Disables the component when set to true.
label A localized user presentable name for this component.
onchange
style Inline style of the container element.
styleClass Style class of the main container element. Default value is null.
tabindex Position of the element in the tabbing order.
unselectable
highlight Highlight the matched fuzzy text in the search results with bold HTML tags. Default is true.
resultStyleInline style of the result elements.
resultStyleClassStyle class of the result elements.
placeholder The placeholder attribute specifies a short hint that describes the expected value of an input field.
listItemsAtTheBeginning Boolean value to specify if the items will be listed at the beginning. Dafault is false.
PrimeFaces Extensions Showcase - © 2011-2023,PrimeFaces: 14.0.5,PrimeFaces Extensions: 14.0.5,JSF: Apache MyFaces JSF-2.3 Core Impl 2.3.10,Server: jetty/9.4.36.v20210114,Build time: 2024-09-10 21:01