I need to implement search (Like find in page) . I have rendered an XML in my HTML page. I need to search for a text in this rendered XML

Question

I need to implement search (Like find in page) . I have rendered an XML in my HTML page. I need to search for a text in this rendered XML. I have set the XML as the innerhtml of a div. I have used IgxTextHighlightDirective for searching and highlighting the search text.

This is my data

        this.htmlData = this.sanitizer.bypassSecurityTrustHtml(xmld);

And this is what i have written in my HTML template

<div class="xml-view" (dblclick)="selectEntryText($event)">
    <div [innerHTML]="htmlData" igxTextHighlight [value]="htmlData" class="search-text">
    </div>
</div>

After typing in the search box. This is my problem.

Answer 1

It looks like you haven't added the necessary styles. Also, for what exactly you use the innerHtml input? As I can see you've correctly set the value input and as long as you execute the find equivalent of your logic, the search capabilities should be working fine.

Check out this sample and topic for more information on how to use the text highlight directive

private find(increment: number) {
    if (this.searchText) {
        this.matchCount = this.highlight.highlight(this.searchText, this.caseSensitive);
        this.index += increment;

        this.index = this.index < 0 ? this.matchCount - 1 : this.index;
        this.index = this.index > this.matchCount - 1 ? 0 : this.index;

        if (this.matchCount) {
            IgxTextHighlightDirective.setActiveHighlight("group1", {
                index: this.index
            });
        }
    } else {
        this.highlight.clearHighlight();
    }
}