PrimeFaces Extensions Showcase

MarkText - Wildcard Search

Wildcard search example for pe:markText demonstrating the wildcards attribute.

Search term:
Wildcard Mode:

Searchable Content

The quick brown fox jumps over the lazy dog. Running is essential for fitness. Programming and design go hand in hand.

Backend Data from Mark Event Listener

Last Matched Terms: No data received yet
Last Positions: No data received yet

Source

XHTML page
Managed bean


                <h:panelGrid columns="2" columnClasses="label,value">
        <h:outputText value="Search term:"/>
        <p:inputText id="searchInput" value="#{markTextWildcardController.searchTerm}" placeholder="Enter search term"
                     onkeyup="PF('markTextWidget').updateMark(this.value)">
        </p:inputText>

        <h:outputText value="Wildcard Mode:"/>
        <p:selectOneMenu id="wildcards" value="#{markTextWildcardController.wildcards}"
                         onchange="PF('markTextWidget').wildcards=this.value; PF('markTextWidget').updateMark(PF('markTextWidget').value);">
            <f:selectItem itemValue="disabled" itemLabel="Disabled" />
            <f:selectItem itemValue="enabled" itemLabel="Enabled (no spaces)" />
            <f:selectItem itemValue="withSpaces" itemLabel="Enabled (with spaces)" />
        </p:selectOneMenu>
    </h:panelGrid>

    <p:panel id="searchContainer" header="Searchable Content" style="margin-top: 20px">
        <p>#{markTextWildcardController.processedText}</p>
    </p:panel>

    <p:panel id="backendDataPanel" header="Backend Data from Mark Event Listener" style="margin-top: 20px">
        <h:outputText value="Last Matched Terms: #{empty markTextWildcardController.lastMatchedTerms ? 'No data received yet' : markTextWildcardController.lastMatchedTerms}" />
        <br/>
        <h:outputText value="Last Positions: #{empty markTextWildcardController.lastPositions ? 'No data received yet' : markTextWildcardController.lastPositions}" />
    </p:panel>

    <pe:markText id="markText" widgetVar="markTextWidget" for="searchContainer" value="#{markTextWildcardController.searchTerm}"
                 wildcards="#{markTextWildcardController.wildcards}" styleClass="marktext-highlight" caseSensitive="false">
        <p:ajax event="mark" listener="#{markTextWildcardController.onHighlight}" update="backendDataPanel messages" />
    </pe:markText>


                @Named
@ViewScoped
public class MarkTextWildcardController implements Serializable {

    private static final long serialVersionUID = 1L;

    private String searchTerm = "r*n";

    private String wildcards = "enabled"; // disabled | enabled | withSpaces

    private String processedText = "The quick brown fox jumps over the lazy dog. "
                + "Running is essential for fitness. "
                + "Programming and design go hand in hand.";

    private List<String> lastMatchedTerms = new ArrayList<>();

    private List<MarkPosition> lastPositions = new ArrayList<>();

    public String getSearchTerm() {
        return searchTerm;
    }

    public void setSearchTerm(String searchTerm) {
        this.searchTerm = searchTerm;
    }

    public String getWildcards() {
        return wildcards;
    }

    public void setWildcards(String wildcards) {
        this.wildcards = wildcards;
    }

    public String getProcessedText() {
        return processedText;
    }

    public void setProcessedText(String processedText) {
        this.processedText = processedText;
    }

    public List<String> getLastMatchedTerms() {
        return lastMatchedTerms;
    }

    public List<MarkPosition> getLastPositions() {
        return lastPositions;
    }

    public void onHighlight(MarkEvent event) {
        this.lastMatchedTerms = event.getMatchedTerms();
        this.lastPositions = event.getPositions();

        FacesContext.getCurrentInstance().addMessage(null,
                    new FacesMessage(FacesMessage.SEVERITY_INFO, "Mark Event Triggered",
                                "Found " + lastMatchedTerms.size() + " matched terms and " + lastPositions.size() + " positions."));
    }
}