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;
}
}
},