• Settings
    • 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
  • Resources

MarkText Search Terms

MarkText highlights search terms within specified containers using mark.js by Julien Royer. These examples widen a search term with wildcards, synonyms and diacritics.

MarkText Tag Documentation

MarkText highlights search terms within specified containers using mark.js.

NameTypeRequiredDefaultDescription
id String false generated Unique identifier of the component in a namingContainer.
rendered boolean false true Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding UIComponent false generated An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar String false generated ('widget_' + componentClientId) Name of the client-side widget.
accuracy String false partially Search accuracy level: 'partially', 'complementarily', or 'exactly'.
acrossElements Boolean false false Search across element boundaries.
caseSensitive Boolean false false Whether the search should be case sensitive.
diacritics Boolean false true Whether accented and unaccented letters are treated as the same during matching.
exclude List false Array of exclusion selectors. Matches inside these elements will be ignored.
for String true Search expression to resolve the target component to search within.
iframes Boolean false false Whether matching should include same-origin iframe documents.
iframesTimeout Integer false 5000 Maximum wait time in milliseconds for iframe loading.
onDone String false Client-side callback executed after marking is complete. The callback receives totalMatches as a parameter.
separateWordSearch Boolean false true Whether to match each word separately.
style String false Inline style of the component.
styleClass String false Style class of the component.
synonyms Object false Map of synonyms for term matching.
value String true Search terms to highlight. Can be a string or array of strings.
wildcards String false disabled Wildcard matching mode: 'disabled'|'enabled'|'withSpaces'.
Tag Documentation Widget Source Basic Matching Search Terms Scope
Wildcard Search

The wildcards attribute: ? matches one character, * any number of characters.

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
Synonyms

The synonyms map highlights synonymous terms in both directions: searching for "one" also highlights "1", and vice versa.

Search term:
Searchable Content
Counting is easy: one, two, three, four, five. Numbers: 1, 2, 3, 4, 5. You can use either words or digits: one (1), two (2), three (3). This demonstrates synonyms highlighting both ways.
Diacritics

With diacritics="true" characters with and without diacritics match each other, e.g. "e" matches "é".

Search term:
Consider diacritics:
Searchable Content

Café, caFe, cafe, façade, naive, naïve, résumé, resume.

Usage


<style>
    .marktext-highlight,
    mark {
        background-color: yellow !important;
        color: black !important;
    }
</style>

<div class="card">
    <h5>Wildcard Search</h5>
    <p>The <code>wildcards</code> attribute: <code>?</code> matches one character, <code>*</code> any number of characters.</p>
    <h:form id="formWildcard">
        <p:messages id="messages" showSummary="true" showDetail="true"/>

        <h:panelGrid columns="2" columnClasses="label,value" cellpadding="4">
            <h:outputText value="Search term:"/>
            <p:inputText id="searchInput" value="#{markTextWildcardController.searchTerm}" placeholder="Enter search term">
                <p:ajax event="keyup" delay="300" update="markText" process="@this"/>
            </p:inputText>

            <h:outputText value="Wildcard Mode:"/>
            <p:selectOneMenu id="wildcards" value="#{markTextWildcardController.wildcards}">
                <f:selectItem itemValue="disabled" itemLabel="Disabled"/>
                <f:selectItem itemValue="enabled" itemLabel="Enabled (no spaces)"/>
                <f:selectItem itemValue="withSpaces" itemLabel="Enabled (with spaces)"/>
                <p:ajax event="change" update="markText" process="@this"/>
            </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" 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>
    </h:form>
</div>

<div class="card">
    <h5>Synonyms</h5>
    <p>
        The <code>synonyms</code> map highlights synonymous terms in both directions: searching for "one" also highlights "1",
        and vice versa.
    </p>
    <h:form id="formSynonyms">
        <p:messages id="messages" showSummary="true" showDetail="true"/>

        <h:panelGrid columns="3" cellpadding="4">
            <h:outputText value="Search term:"/>
            <p:inputText id="searchInput" value="#{synonymsMarkTextController.searchTerm}" placeholder="Enter search term">
                <p:ajax event="keyup" delay="500" update="searchContainer markText"/>
            </p:inputText>
            <p:commandButton value="Highlight" update="searchContainer markText" icon="pi pi-search"/>
        </h:panelGrid>

        <p:panel id="searchContainer" header="Searchable Content" style="margin-top: 20px">
            <h:panelGroup id="searchContent" layout="block">
                #{synonymsMarkTextController.processedText}
            </h:panelGroup>
        </p:panel>

        <pe:markText id="markText" for="searchContent" value="#{synonymsMarkTextController.searchTerm}" synonyms="#{synonymsMarkTextController.synonyms}" styleClass="marktext-highlight">
            <p:ajax event="mark" listener="#{synonymsMarkTextController.onHighlight}" update="messages"/>
        </pe:markText>
    </h:form>
</div>

<div class="card">
    <h5>Diacritics</h5>
    <p>With <code>diacritics="true"</code> characters with and without diacritics match each other, e.g. "e" matches "é".</p>
    <h:form id="formDiacritics">
        <p:messages id="messages" showSummary="true" showDetail="true"/>

        <h:panelGrid columns="3" cellpadding="4">
            <h:outputText value="Search term:"/>
            <p:inputText id="searchInput" value="#{diacriticsMarkTextController.searchTerm}" placeholder="Enter search term">
                <p:ajax event="keyup" delay="500" update="searchContainer markText"/>
            </p:inputText>
            <p:commandButton value="Highlight" update="searchContainer markText" icon="pi pi-search"/>
        </h:panelGrid>

        <h:panelGrid columns="2" style="margin-top:10px" cellpadding="4">
            <h:outputText value="Consider diacritics:"/>
            <p:selectBooleanCheckbox value="#{diacriticsMarkTextController.diacritics}">
                <p:ajax update="markText searchContainer" process="@this"/>
            </p:selectBooleanCheckbox>
        </h:panelGrid>

        <p:panel id="searchContainer" header="Searchable Content" style="margin-top: 20px">
            <h:panelGroup id="searchContent" layout="block">
                <p>#{diacriticsMarkTextController.processedText}</p>
            </h:panelGroup>
        </p:panel>

        <pe:markText id="markText" widgetVar="markTextWidget" for="searchContent" value="#{diacriticsMarkTextController.searchTerm}"
                     diacritics="#{diacriticsMarkTextController.diacritics}" styleClass="marktext-highlight">
            <p:ajax event="mark" listener="#{diacriticsMarkTextController.onHighlight}" update="messages"/>
        </pe:markText>
    </h:form>
</div>