PrimeFaces Extensions Showcase

MarkText - Done Callback

Demonstrates the onDone client-side callback, which fires after mark.js completes marking. The callback receives the total number of matches as a parameter.

Compare with the Update Search example: update search uses a server-side p:ajax event="mark" listener that receives full match data (matched terms and positions) via a server round-trip, while this done callback is purely client-side using the onDone attribute with no Ajax request and receives only the total match count.

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.

Done Callback Result

No search performed yet.
Total matches: 0

Source

XHTML page
Managed bean


                <h:panelGrid columns="2">
        <h:outputText value="Search term:"/>
        <p:inputText id="doneSearchInput" value="#{markTextDoneController.searchTerm}" placeholder="Enter search term"
                     onkeyup="PF('markTextWvDone').updateMark(this.value)"/>
    </h:panelGrid>

    <p:panel id="searchContainer" header="Searchable Content" style="margin-top: 20px">
        <p>#{markTextDoneController.processedText}</p>
    </p:panel>

    <p:panel id="donePanel" header="Done Callback Result" style="margin-top: 20px">
        <h:outputText id="doneLabel" value="No search performed yet." />
        <br/>
        <h:outputText value="Total matches: "/>
        <h:outputText id="doneCount" value="0"/>
    </p:panel>

    <pe:markText id="markText" widgetVar="markTextWvDone" for="searchContainer" value="#{markTextDoneController.searchTerm}"
                 styleClass="marktext-highlight" caseSensitive="false"
                 onDone="markDone(totalMatches)"/>


                @Named
@ViewScoped
public class MarkTextDoneController implements Serializable {

    private static final long serialVersionUID = 1L;

    private String searchTerm = "lorem";

    private String processedText = "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.";

    public String getSearchTerm() {
        return searchTerm;
    }

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

    public String getProcessedText() {
        return processedText;
    }

    public void setProcessedText(String processedText) {
        this.processedText = processedText;
    }
}

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.
onDone	Client-side callback executed after marking is complete. The callback receives totalMatches as a parameter.
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.Default is generated ('widget_' + componentClientId).
wildcards	Wildcard matching mode: 'disabled'\|'enabled'\|'withSpaces'.Default is disabled.