Simple Plugin with custom javascript wont work - no console error

Question

Please forgive me, this is probably a duplicate, but I am not sure what to search anymore, as I do not get any error code.

I want to implement text highlighting with javascript from this code example here:

https://www.the-art-of-web.com/javascript/search-highlight/#box1

For this, I made this miserable attempt at my first ever custom plugin:

<?php
/*
Plugin Name: InPage-Search-Highlight
Plugin URI:  http://link to your plugin homepage
Description: Highlights all occurences of a search term within the same page.
Version:     1.0
Author:      morph3us - based off of https://www.the-art-of-web.com/javascript/search-highlight/
Author URI:  http://www.morph3us.net
License:     CC0
*/

function inpage_search_highlight() {
    $pluginurl = plugins_url('/inpage-search-highlight/js/hilitor.js');

    echo "<div class='inpage-search' style='margin-top:300px'>
        <script type='text/javascript' src='{$pluginurl}'></script>
        <script type='text/javascript'>
          var myHilitor = new Hilitor('page-template'); // id of the element to parse
          myHilitor.apply('highlight words');
        </script>
    </div>";
}

add_shortcode('inpage_search_highlight', 'inpage_search_highlight');
?>

I obviously additionally added a folder named "js" and a file within called "hilitor.js". In the latter I copied the code from the website.

The contents of the echo are visible in the chrome developer tools, however no searchbox appears on the actual page.

Edit

Moral of the story: I did initialize the Javascript, but did not provide any UI to call them. There's just so much new stuff for me, that I overlooked the obvious.

I was kind of mislead by the phrasing in the art of web tutorial. Because paragraph 2 is titled "how to implement", I thought this would be the whole integration, it should probably be more specifically called "how to initialize the highlitor class" or something.

Way down in section 5, there is an example that was a breeze to implement and works even better than what I had originally envisioned.

Thanks for the help, guys, you really made me rethink the right things! So the working echo part in the code is:

    echo "<div class='inpage-search' style='margin-top:300px'>
        <form>
            <p>Highlight keywords as you type: <input id='keywords' size='24'></p>
        </form>

        <script src='{$pluginurl}'></script>
        <script>

          window.addEventListener('DOMContentLoaded', function(e) {
            var myHilitor2 = new Hilitor('playground');
            myHilitor2.setMatchType('left');
            document.getElementById('keywords').addEventListener('keyup', function(e) {
              myHilitor2.apply(this.value);
            }, false);
          }, false);

        </script>   
    </div>";

Answer 1

You could "borrow" the html form from the example and include this in your template - either directly of via a filter like wp_footer:

<form method="GET" action="/javascript/search-highlight/" onsubmit="myHilitor.apply(hilite.value); return false;">
<fieldset>
<legend>Highlight Words</legend>
<label>Keywords</label><span><input type="text" size="32" name="hilite" value="search engine keywords">
<input type="submit" value="Apply">
<input type="button" value="Remove" onclick="myHilitor.remove();"></span>
</fieldset>
</form>