我需要实现搜索（如在页面中查找）。我在我的 HTML 页面中呈现了一个 XML。我需要在这个呈现的 XML 中搜索文本答案

【问题标题】：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我需要实现搜索（如在页面中查找）。我在我的 HTML 页面中呈现了一个 XML。我需要在这个呈现的 XML 中搜索文本
【发布时间】：2020-02-23 09:25:17
【问题描述】：

我需要实现搜索（如在页面中查找）。我在我的 HTML 页面中呈现了一个 XML。我需要在这个呈现的 XML 中搜索文本。我已将 XML 设置为 div 的 innerhtml。我使用 IgxTextHighlightDirective 来搜索和突出显示搜索文本。

这是我的数据

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

这就是我在 HTML 模板中写的内容

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

在搜索框中输入后。这是我的问题。

【问题讨论】：

您有机会检查建议的解决方案吗？

标签： angular full-text-search ignite-ui-angular

【解决方案1】：

您似乎尚未添加necessary styles。另外，您究竟使用innerHtml 输入是为了什么？正如我所见，您已经正确设置了value 输入，并且只要您执行与您的逻辑等效的find，搜索功能应该可以正常工作。

查看this sample 和topic 了解有关如何使用文本高亮指令的更多信息

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

【讨论】：