2

I'm using rangy to highlight some text in a specific div after the user searches for it. The text that is being searched is wrapped in one div, which I am limiting the range to. This searchable text is also many paragraphs, requiring the user to scroll down to the end of the searchable text.

I am able to search and highlight the text in the range, but the search result is not scrolling into the user's view of the page when a match is found. The search result is highlighted, but it sits below the user's current view and they need to scroll down in order to see it.

Upon successful match, I would like the search result to scroll into the view of the user. How can I achieve this?

Here is method I am using to search and highlight, which is called from a different div than document.getElementById("my-div") on my page:

doSearch(text) {
  var range = rangy.createRange();
  var searchScopeRange = rangy.createRange();
  searchScopeRange.selectNodeContents(
    document.getElementById("my-div")
  );

  var options = {
    caseSensitive: false,
    wholeWordsOnly: true,
    withinRange: searchScopeRange
  };

  range.selectNodeContents(document.getElementById("my-div"));
  this.searchResultApplier.undoToRange(range);

  var searchTerm = text;

  if (searchTerm !== "") {
    // Iterate over matches
    while (range.findText(searchTerm)) {
      // range now encompasses the first text match
      this.searchResultApplier.applyToRange(range);

      // Collapse the range to the position immediately after the match
      range.collapse(false);
      break;
    }
  }
},
Joe Berg
  • 774
  • 2
  • 8
  • 21

0 Answers0