How to highlight the searched text?

[turbowars]

Is there a way I can handle the search event so that I can highlight the searched text in the result list?

[kazazor]

This is also highly important to us, would love to see it happening :)

[daformat]

I've been wanting that feature too.

I ended up highlighting the results after the component has updated using mark.js, which is a pretty awesome highlighting library supporting tons of useful options.

I'm using a custom this.shouldHighlightResults method because in my usecase I can have thousands of results depending on the query you make (I'm displaying a treeview of a french legal code).

  componentDidUpdate() {
    if (this.markInstance) {
      this.markInstance.unmark();
    }
    // highlight search results
    if (this.shouldHighlightResults(this.state.filter)) {
      const markContext = document.querySelector('.code-toc-container');
      this.markInstance = new Mark(markContext);
      this.markInstance.mark(this.state.filter, {
        acrossElements: true,
        separateWordSearch: false
      });
    }
  }

You can see the highlighting live here: http://code.pensionsmilitaires.com/codes/cpmivg2017?q=Annot%C3%A9

[baradhili]

@daformat do you have that code in a repo? I like how it looks on the demo site.