Simple Plugin with custom javascript wont work – no console error

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.

Contents hide

Edit

Answers:

Method 1

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>";

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating