arya-blue
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga-blue
vela-blue
MarkText - Diacritics
Demonstrates mark.js diacritics handling.
Search term:
Consider diacritics:
Searchable Content

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

Source

                <h:panelGrid columns="3">
        <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">
        <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}"/>
    </pe:markText>
            
Components and more
Documentation pe:
Attributes (move mouse over the names to see data types)
Name Description
No attributes available for this component.
PrimeFaces Extensions Showcase - © 2011-2025,PrimeFaces: 15.0.17,PrimeFaces Extensions: 15.0.17,JSF: Apache MyFaces JSF-2.3 Core Impl 2.3.10,Server: Apache Tomcat (TomEE)/9.0.82 (8.0.16),Build time: 2026-07-09 20:44