In-page Highlighting :: Using JavaScript on Client-Side



Introduction

This is an example of an alternative use of searchhi.js. See Highlighting Words from Search Results for the original use of this script and some additional details on how to customize the example below. Very little additional instructions will be provided on this page aside from this example.

Also See Slimmer Simpler Example
This example is meant to extend the features of Highlighting Words from Search Results to do an additional type of in-page highlighting. If all you want is in-page highlighting and none of the other stuff, then you should see the much slimmer example in Simple In-page Highlighting Example.
This Example

The only difference between this and the "Method 2" implementation (in the "Option 1" case) is the <form>...</form> to insert where you want the search box. Use the following instead.

<form name="searchhi" onSubmit="localSearchHighlight('?h=' + document.searchhi.h.value); return false;">

   <p>Highlight words: <input name="h" value="" /></p>

   <input type="button" value="Highlight" 
    onclick="localSearchHighlight('?h=' + document.searchhi.h.value);" />

   <input type="button" value="Remove Highlight" 
    onclick="unhighlight(document.getElementsByTagName('body')[0])" />

</form>

This will produce the following.

Highlight words:

Notice that an actual form submission is not required to trigger the highlighting. Also notice that highlighting can be turned off without a form submission. Finally, notice that the same modifications can be made to the "Option 2" case of the "Method 2" implementation if refresh toggling is desired.