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;
    }
}

Use Cases

Documentation pe:markText

Attributes (move mouse over the names to see data types)

Name	Description
accuracy	Search accuracy level: 'partially', 'complementarily', or 'exactly'.Default is partially.
acrossElements	Search across element boundaries.Default is false.
binding	An EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
caseSensitive	Whether the search should be case sensitive.Default is false.
diacritics	Whether accented and unaccented letters are treated as the same during matching.Default is true.
exclude	Array of exclusion selectors. Matches inside these elements will be ignored.
for	Search expression to resolve the target component to search within.
id	Unique identifier of the component in a namingContainer.Default is generated.
iframes	Whether matching should include same-origin iframe documents.Default is false.
iframesTimeout	Maximum wait time in milliseconds for iframe loading.Default is 5000.
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
separateWordSearch	Whether to match each word separately.Default is true.
style	Inline style of the component.
styleClass	Style class of the component.
synonyms	Map of synonyms for term matching.
value	Search terms to highlight. Can be a string or array of strings.
widgetVar	Name of the client-side widget.
wildcards	Wildcard matching mode: 'disabled'\|'enabled'\|'withSpaces'.Default is disabled.