arya-blue
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga-blue
vela-blue
MarkText
MarkText highlights search terms within specified containers using mark.js.
Search term:
Searchable Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

PrimeFaces Extensions provides additional components for PrimeFaces. MarkText is a new component that highlights search terms within specified containers using mark.js.

Source

                <h:panelGrid columns="3">
        <h:outputText value="Search term:"/>
        <p:inputText id="searchInput" value="#{markTextController.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">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>PrimeFaces Extensions provides additional components for PrimeFaces. MarkText is a new component that highlights search terms within specified containers using mark.js.</p>
    </p:panel>

    <pe:markText id="markText" for="searchContainer" value="#{markTextController.searchTerm}" styleClass="marktext-highlight"/>
            
Components and more
Use Cases
Documentation pe:markText
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 false component will not be rendered.
widgetVar Name of the client side widget.
style Style of the main container element. Default value is null.
styleClass Style class of the main container element. Default value is null.
value The search term to highlight.
for Search expression for the container to search in.
caseSensitive Whether to perform case-sensitive search. Default is false.
separateWordSearch Whether to search for separate words only. Default is true.
accuracy Accuracy level for matching. Can be 'partially', 'complementary', or 'exactly'. Default is 'partially'.
PrimeFaces Extensions Showcase - © 2011-2025,PrimeFaces: 15.0.12,PrimeFaces Extensions: 15.0.12,JSF: Apache MyFaces JSF-2.3 Core Impl 2.3.10,Server: Apache Tomcat (TomEE)/9.0.82 (8.0.16),Build time: 2026-02-01 15:24