Fuzzy Search is a fast SublimeText-like fuzzy search for JavaScript.
Type in the fields to search the themes and time zones. The first search uses a converter and fires an AJAX change event.
<style>
.p-fuzzysearch-item b {
color: red;
}
</style>
<div class="card">
<h5>Basic Usage</h5>
<p>Type in the fields to search the themes and time zones. The first search uses a converter and fires an AJAX <i>change</i> event.</p>
<h:form id="formBasicUsage">
<p:growl id="messages"/>
<h:panelGrid columns="2" cellpadding="4">
<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}" update="messages"/>
<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>
</h:form>
</div>
package org.primefaces.extensions.showcase.controller.fuzzysearch;
import java.io.Serial;
import java.io.Serializable;
import java.util.Arrays;
import java.util.List;
import java.util.TimeZone;
import jakarta.annotation.PostConstruct;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.component.UIOutput;
import jakarta.faces.context.FacesContext;
import jakarta.faces.event.ActionEvent;
import jakarta.faces.event.AjaxBehaviorEvent;
import jakarta.faces.view.ViewScoped;
import jakarta.inject.Named;
import org.primefaces.extensions.showcase.model.system.AvailableThemes;
import org.primefaces.extensions.showcase.model.system.Theme;
@Named
@ViewScoped
public class FuzzySearchController implements Serializable {
@Serial
private static final long serialVersionUID = 20120224L;
private List<Theme> themes;
private Theme selectedTheme;
private List<String> timezones;
private String selectedTimezone;
@PostConstruct
public void init() {
themes = AvailableThemes.getInstance().getThemes();
timezones = Arrays.asList(TimeZone.getAvailableIDs());
}
public void onChange(final AjaxBehaviorEvent event) {
final Theme theme = (Theme) ((UIOutput) event.getSource()).getValue();
final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO,
"Select fired: Theme is " + theme.getName(), null);
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public void onSubmit(final ActionEvent actionEvent) {
FacesMessage msg;
if (selectedTheme != null) {
msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Theme is: " + selectedTheme.getName(), null);
}
else {
msg = new FacesMessage(FacesMessage.SEVERITY_ERROR, "No Theme Selected", null);
}
FacesContext.getCurrentInstance().addMessage(null, msg);
if (selectedTimezone != null) {
msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Timezone is: " + selectedTimezone, null);
}
else {
msg = new FacesMessage(FacesMessage.SEVERITY_ERROR, "No Timezone Selected", null);
}
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public List<Theme> getThemes() {
return themes;
}
public void setThemes(final List<Theme> themes) {
this.themes = themes;
}
public Theme getSelectedTheme() {
return selectedTheme;
}
public void setSelectedTheme(final Theme selectedTheme) {
this.selectedTheme = selectedTheme;
}
public List<String> getTimezones() {
return timezones;
}
public void setTimezones(final List<String> timezones) {
this.timezones = timezones;
}
public String getSelectedTimezone() {
return selectedTimezone;
}
public void setSelectedTimezone(final String selectedTimezone) {
this.selectedTimezone = selectedTimezone;
}
}
package org.primefaces.extensions.showcase.model.system;
/**
* Theme
*
* @author Oleg Varaksin / last modified by $Author$
* @version $Revision$
*/
public class Theme {
private String name;
public Theme() {
}
public final String getName() {
return name;
}
public final void setName(final String name) {
this.name = name;
}
}