PrimeFaces Extensions Showcase

MarkText

MarkText highlights search terms within specified containers using mark.js. The acrossElements feature allows highlighting text that spans across multiple HTML elements. This is particularly useful when separateWordSearch is set to false (searching for exact phrases), as phrases split by tags like  or  would otherwise not be matched. Use the toggle to see the difference when acrossElements is enabled or disabled.

Search term:		Across Elements:

Searchable Content with Spanning Elements

This example demonstrates how acrossElements="true" works. By default, separateWordSearch is true, which means "PrimeFaces Extensions" would be found as two separate words. However, in this example, we have set separateWordSearch="false" to search for the exact phrase.

Try searching for "PrimeFaces Extensions". Below, it is rendered as PrimeFaces Extensions. Without acrossElements="true", this would not be found as an exact phrase because it is split across two HTML nodes.

PrimeFaces Extensions provides additional components for PrimeFaces.

The MarkText component uses the mark.js library to highlight search terms.

With acrossElements enabled, phrases like across elements can be highlighted even if they are split by tags.

Source

XHTML page
Managed bean


                <h:panelGrid columns="4">
        <h:outputText value="Search term:"/>
        <p:inputText id="searchInput" value="#{acrossElementsMarkTextController.searchTermAcrossElements}" placeholder="Enter search term">
             <p:ajax event="keyup" delay="500" update="searchContainer markText"/>
        </p:inputText>
        <h:outputText value="Across Elements:"/>
        <p:selectBooleanCheckbox value="#{acrossElementsMarkTextController.acrossElements}">
            <p:ajax update="searchContainer markText"/>
        </p:selectBooleanCheckbox>
        <p:commandButton value="Highlight" update="searchContainer markText" icon="pi pi-search"/>
    </h:panelGrid>

    <p:panel id="searchContainer" header="Searchable Content with Spanning Elements" style="margin-top: 20px">
        <h:panelGroup id="searchContent" layout="block">
            <p>
                This example demonstrates how <code>acrossElements="true"</code> works. 
                By default, <code>separateWordSearch</code> is <code>true</code>, which means "PrimeFaces Extensions" would be found as two separate words.
                However, in this example, we have set <code>separateWordSearch="false"</code> to search for the <strong>exact phrase</strong>.
            </p>
            <p>
                Try searching for "<strong>PrimeFaces Extensions</strong>". 
                Below, it is rendered as <code>&lt;strong&gt;PrimeFaces&lt;/strong&gt; &lt;em&gt;Extensions&lt;/em&gt;</code>.
                Without <code>acrossElements="true"</code>, this would not be found as an exact phrase because it is split across two HTML nodes.
            </p>
            <hr/>
            <p><strong>PrimeFaces</strong> <em>Extensions</em> provides additional components for PrimeFaces.</p>
            <p>The <strong>MarkText</strong> component uses the <em>mark.js library</em> to highlight search terms.</p>
            <p>With <code>acrossElements</code> enabled, phrases like <strong>across</strong> elements can be highlighted even if they are split by tags.</p>
        </h:panelGroup>
    </p:panel>

    <pe:markText id="markText" for="searchContent" value="#{acrossElementsMarkTextController.searchTermAcrossElements}" 
                 styleClass="marktext-highlight" acrossElements="#{acrossElementsMarkTextController.acrossElements}" separateWordSearch="false"/>


                @Named
@ViewScoped
public class AcrossElementsMarkTextController implements Serializable {

    private static final long serialVersionUID = 1L;

    private String searchTermAcrossElements = "PrimeFaces Extensions";

    private boolean acrossElements = true;

    public String getSearchTermAcrossElements() {
        return searchTermAcrossElements;
    }

    public void setSearchTermAcrossElements(String searchTermAcrossElements) {
        this.searchTermAcrossElements = searchTermAcrossElements;
    }

    public boolean isAcrossElements() {
        return acrossElements;
    }

    public void setAcrossElements(boolean acrossElements) {
        this.acrossElements = acrossElements;
    }
}