PrimeFaces Extensions Showcase

MarkText - Exclude Selectors

Demonstrates the exclude attribute, which skips highlighting inside selected elements such as headings or regions marked with CSS classes.

Search term:
Excluded selectors:	h3 .ignore .notes

Current Exclusion Rules

[h3, .ignore]

Searchable Content

PrimeFaces heading stays unmarked when h3 is excluded

PrimeFaces Extensions enhances PrimeFaces with additional components. This PrimeFaces occurrence in a normal paragraph should be highlighted.

PrimeFaces inside this .ignore block should remain untouched when .ignore is excluded.

You can toggle exclusions to compare normal matches against ignored regions and verify that PrimeFaces is only marked in eligible content.

PrimeFaces inside this .notes block becomes ignored only when .notes is selected.

Source

XHTML page
Managed bean


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

        <h:outputText value="Excluded selectors:"/>
        <p:selectManyCheckbox id="excludeSelectors" value="#{markTextExcludeController.excludedSelectors}" layout="pageDirection">
            <f:selectItems value="#{markTextExcludeController.availableExcludes}" var="selector" itemLabel="#{selector}" itemValue="#{selector}"/>
            <p:ajax event="change" update="markText activeExcludes" process="@this"/>
        </p:selectManyCheckbox>
    </h:panelGrid>

    <p:panel id="activeExcludes" header="Current Exclusion Rules" style="margin-top: 1rem">
        <h:outputText value="#{empty markTextExcludeController.excludedSelectors ? 'No selectors excluded. All matching text can be highlighted.' : markTextExcludeController.excludedSelectors}"/>
    </p:panel>

    <p:panel id="searchContainer" header="Searchable Content" style="margin-top: 1rem">
        <h:panelGroup id="searchContent" layout="block">
            <h3>PrimeFaces heading stays unmarked when h3 is excluded</h3>
            <p>
                PrimeFaces Extensions enhances PrimeFaces with additional components. This PrimeFaces occurrence in a normal paragraph should be highlighted.
            </p>
            <span class="ignore">
                PrimeFaces inside this .ignore block should remain untouched when .ignore is excluded.
            </span>
            <p>
                You can toggle exclusions to compare normal matches against ignored regions and verify that PrimeFaces is only marked in eligible content.
            </p>
            <div class="notes">
                PrimeFaces inside this .notes block becomes ignored only when .notes is selected.
            </div>
        </h:panelGroup>
    </p:panel>

    <pe:markText id="markText" for="searchContent" value="#{markTextExcludeController.searchTerm}"
                 exclude="#{markTextExcludeController.excludedSelectors}" styleClass="marktext-highlight"
                 caseSensitive="false"/>


                @Named
@ViewScoped
public class MarkTextExcludeController implements Serializable {

    private static final long serialVersionUID = 1L;

    private String searchTerm = "PrimeFaces";

    private final List<String> availableExcludes = Arrays.asList("h3", ".ignore", ".notes");

    private List<String> excludedSelectors = new ArrayList<>(Arrays.asList("h3", ".ignore"));

    public String getSearchTerm() {
        return searchTerm;
    }

    public void setSearchTerm(String searchTerm) {
        this.searchTerm = searchTerm;
    }

    public List<String> getAvailableExcludes() {
        return availableExcludes;
    }

    public List<String> getExcludedSelectors() {
        return excludedSelectors;
    }

    public void setExcludedSelectors(List<String> excludedSelectors) {
        this.excludedSelectors = excludedSelectors;
    }
}

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.