Possible to add search bar that functions like using (command F) or (CTRL F) inside a website

Question

I have a client that wants the function of being able to enter a key word into a search bar and have it start to highlight the results on the page as you are typing (or after you hit search).

This is just like using the ⌘+F function on a Mac (or Ctrl+F on PC) and the browser itself pops up a search box. He doesn't want to have to hit ⌘+F though, or have his customers to have to know that command. He wants to just have a search bar already on that page that he can type into and it start highlighting words.

ANY idea how to do this in WordPress? I've searched the internet and cannot find a tutorial on how to do it.

If not a search box, maybe a button they can click that prompts to pull up command F on a mac or Ctrl+F on a pc?

I am at a loss here and cannot figure this out. Any tips or experience with this, I would be very grateful.

Answer 1

So I found this on another thread and it seems to work but it only finds the first occurrence. I need it to highlight all the occurrences. Any idea how to get it to do that?

<p> hello world, hello world, hello world, hello world</p>

<!--BEGIN SEARCH BOX -->

<div class="search_box">
    <form action="" id="form2">
        <div>
            <input type="text" id="search">
            <input type="button" id="submit_form" onclick="checkInput()" value="Submit">
        </div>
    </form>
</div>

<!--END SEARCH BOX -->
<script>
    function checkInput() {
        var query = document.getElementById('search').value;
        window.find(query);
        return true;
    }
</script>