How do I scroll to next available highlighted word in found results?

Question

0.00/5 (No votes)

See more:

Searching for some word, I'm getting some highlighted results and I'm using

JavaScript

.scrollIntoView();

to scroll into first available word.

JavaScript

// scroll to highlighted word(s)
        $(this).closest(".timeline-compendium__content")[0].scrollIntoView();

What I would like to achieve, is to go to next highlighted word but I'm not sure how to do it. If I'm trying to put [1] I'm getting

Quote:
Uncaught TypeError: Cannot read property 'scrollIntoView' of undefined"

For more details about my issue, an example can be found here: Pick next highlighted word

What I have tried:

JavaScript

// jump to next available highlighted word 
        let pickWord = document.querySelector('#btnNext');
        pickWord.addEventListener('click', function(){
            // scroll to highlighted word(s)
            $(this).closest(".timeline-compendium__content")[0].scrollIntoView();
        });

JavaScript

function highlightWord() {
            // create a regex from our term
            const word = document.getElementById("searchedWord").value;
            const r = new RegExp("(" + word + ")", "ig");
            $(".reports-list-item__title--compendium").each(function (i) {
                if ($(this).text().match(r)) {
                    // get all the matches
                    var matches = $(this).text().match(r);
                    console.log(matches);
                    // loop through them
                    $.each(matches, function () {
                        // push the index of this section onto the array
                        occurrences.push(i);
                    });
                    // wrap each found search term with our mark to highlight it
                    $(this).html($(this).text().replace(r, "<mark>$&</mark>"));
                    $(this).closest(".timeline-compendium__content").collapse("show");
                    // scroll to highlighted word(s)
                    $(this).closest(".timeline-compendium__content")[0].scrollIntoView();
                    $(this).closest('.timeline-type .timeline-type__content').collapse('show');                    
                }   
            });
        }

Posted 13-Jul-21 5:36am

User 15221028

Updated 13-Jul-21 6:29am

Add a Solution

Comments

Chris Copeland 13-Jul-21 12:11pm

How are you handling the move to the next word? Are you expecting a keyboard button press to scroll to the next position, or do you have a physical button being clicked? Ie. if the user searches and scrolls to the first word, how are they then signalling to the browser they want to move to the next one?

User 15221028 13-Jul-21 12:16pm

Hello Chris,

In my example I placed a Next button to add to it the functionality to go to next highlighted word. By clicking it, I would like to go to next highlighted word then scroll to it as it happened with the first.

Of course, the button will have to have position: sticky to remain visible to the users but currently I want to give some functionality to it.

Any advice regarding this?

2 solutions

Solution 1

What this probably requires is state-tracking. What this means is that you need to keep a record of which of the elements was last scrolled to, so you know which one is next in the list.

You'll need at least two things to make this work:

An array variable which contains references to the elements on the screen which had matched text
A number variable which keeps track of which element was last scrolled into view

Using the above you can build your array variable up each time the search runs, and then when the first element is scrolled into view you can set your number variable to 0 (indicating that the first element was scrolled to)

When the next button is clicked, you know you can increment your number variable, get the element from the array variable, and scroll that into view. Make sure to check that the number variable does not exceed or equal the length of the array otherwise you'll get errors. Also make sure to reset both the array and the number variables when a new search is run, otherwise you'll end up cycling through the same elements all over again!

Posted 13-Jul-21 6:29am

Chris Copeland

Comments

Chris Copeland 16-Jul-21 4:15am

I can't provide you the solution, this is something you'll probably need to develop yourself! It does present a good opportunity to learn more about development, and if you get stuck then you can always post a new question with what you've developed so far :)

User 15221028 16-Jul-21 4:22am

In my opinion, some people are learning visually and a small example is also a good opportunity to teach a junior developer than leaving him struggling for hours or days finding a possible answer, but thanks anyway for the logic explanation. I added my solution which works quite good.

Chris Copeland 16-Jul-21 4:49am

I agree some people learn visually, but we also don't provide full code or solutions on demand. We expect people to take the initiative and make the effort to solve the problems themselves, and provide support along the way. I gave you all of the building blocks necessary to get started, and if you've managed to build a solution then my job is done!

You have also changed your comment since I wrote my previous one, removing the part where you asked for the full solution.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

User 15221028 · Accepted Answer · 2021-07-15T22:19:00

JavaScript

$("#btnNext").on("click", test);  
  var i = 0;
  function test() {
     var pickHighlights = document.querySelectorAll("mark");
     var viewportOffset = pickHighlights[i].getBoundingClientRect();

     var top = viewportOffset.top;
     window.scrollTo(0, top);
            
     i++;

     if (i >= pickHighlights.length) {
         i = 0;
     }
}

How do I scroll to next available highlighted word in found results?

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us