|
|
 |
email me
email me
Highlighting Words from Search Results :: Using JavaScript on Client-Side
PURPOSE
After searching for a set of words on a common search engine, it can be extremely helpful when
the pages found in the results of the search detect that they are being linked from a search and
consequently automatically highlight all of the search words. Implementing this feature is
fairly simple to do with client-side JavaScript, which gets embedded directly into a web page.
When I wanted to add this feature to all of my web pages, I searched on-line to try to find pre-built
highlighting scripts. One of the first scripts I found was almost perfect. In fact, for many people
it will be perfect. Download it and read its instructions at:
While this script did well, I wanted a script that allowed users to also highlight words
while from within a textbox on the page. I wanted people to be able to submit new
words for highlighting without having to go through the search engine first. See
later in this page for an example. Additionally, this original version of the
script only had support for Google and Yahoo searches. I wanted to support a wider
range of search engines. And finally, I wanted
the script to be cognizant of quotes, parentheses, commas, and booleans.
And so, I produced a modified searchhi JavaScript
that is called in a slightly different way. I outline the general method in using this
modified script here.
|
Also Note Additional Example
This script is very versatile. The examples given here depend on a form submission to update the page highlighting. This is just because the mechanisms shown here
are related to search engine word highlighting. The form submission is not necessary. See In-page
Highlighting and Simple In-page Highlighting for examples of how to do in-page
highlighting without any form submission. These examples also show how to do highlighting removal without form submission.
First, Download and "Install" the Script
Save searchhi.js and place it on your webserver
in the same directory as your web pages. This script needs to be available for download by
your web users.
If you cannot host this file on your server directly, then link to the
one that I host here at http://links.tedpavlic.com/js/searchhi.js.
However, note that I reserve the right to make changes to this script and how it is used.
If you link directly to this copy, it may change the functionality of the highlighting on
your page.
Pre-Methods: Configuring So Refresh Toggles Highlighting On and Off
I was once asked to implement a version of this script that would turn off the
highlighting when a web browser refreshed the page, and so I added some code to the script
to make that possible. The current script has the option of toggling the highlighting on
and off every time the browser is refreshed as long as the browser supports session
cookies. See Methods for Detecting Page Refreshes with JavaScript for details on the mechanism
that detects the page refreshes.
To turn on this feature, replace every SearchHighlight(); below with a
SmartHighlight(); and add an onLoad="JavaScript:SmartHLUnload();" to the
<body> tags below. Examples are given below.
Method 1: For Simple Highlighting of Search Words from Search Engine Results
Add to your <head>...</head> section the following
script and style lines. Be sure to change searchhi.js
so it points to wherever the script is located on your web page. Again, if you have no place
to host this JavaScript, link to copy that I make available at the URL given above.
Also change the style background color to be whatever you want the color of your
"highlighter" to be.
<style><!--
SPAN.searchword { background-color:yellow; }
// -->
</style>
<script src="searchhi.js" type="text/javascript" language="JavaScript"></script>
To get the script to run, an onLoad needs to be added to the opening
<body> tag that runs the JavaScript SearchHighlight()
function. For example:
<body onLoad="JavaScript:SearchHighlight();">
or, if you want to toggle highlighting on every refresh, use
<body onLoad="JavaScript:SmartHighlight();" onUnload="JavaScript:SmartHLUnload();">
This should be sufficient to make the web page highlight search terms when linked
from search results.
Method 2: Adding a Textbox for Submitting Words from Within the Page
It may be a good idea to put a text input on your page that allows users to select
words to highlight. Below is an example. Type a word in the textbox and submit. The result
will be a copy of this page with that word highlighted.
Notice that this textbox also keeps track of all the current words being
highlighted.
To make this possible, the script must be added to the web page in a
slightly different way. DO NOT DO THE PREVIOUS INSTRUCTIONS.
Instead, follow the instructions below, which have been broken into
an Option 1 and an Option 2 which
are nearly identical. Option 1 is the configuration
that does not do the "refresh detection" described above.
Option 2 enables this detection.
Option 1: With No Refresh Detection
Add the following lines to the <head>...</head> section. Note that
the searchhi document name is suggested,
but it can be changed. It just needs to be changed here and in the form in
the main body (see below).
<style><!--
SPAN.searchword { background-color:yellow; }
// -->
</style>
<script src="searchhi.js" type="text/javascript" language="JavaScript"></script>
<script language="JavaScript"><!--
function loadSearchHighlight()
{
SearchHighlight();
document.searchhi.h.value = searchhi_string;
if( location.hash.length > 1 ) location.hash = location.hash;
}
// -->
</script>
Additionally, add this DIFFERENT onLoad to the
<body> opening tag:
<body onLoad="JavaScript:loadSearchHighlight();">
Now add a simple form like this one to your main content. This particular form will
produce a text box and a submit button identical to the example give above.
<form method="get" name="searchhi">
<input type="text" name="h" />
<input type="submit" value="Go!" />
</form>
And those are all the changes that are needed.
Option 2: With Refresh Detection
The following instructions are nearly identical to the ones in Option 1.
However, take special notice that all references to
SearchHighlight() were changed to SmartHighlight(). Additionally, notice the introduction of
SmartHLUnload() into the
<body> tag and the introduction of NotRefreshHL() into the
<form> tag.
Add the following lines to the <head>...</head> section. Note that
the searchhi document name is suggested,
but it can be changed. It just needs to be changed here and in the form in
the main body (see below).
<style><!--
SPAN.searchword { background-color:yellow; }
// -->
</style>
<script src="searchhi.js" type="text/javascript" language="JavaScript"></script>
<script language="JavaScript"><!--
function loadSearchHighlight()
{
SmartHighlight();
document.searchhi.h.value = searchhi_string;
if( location.hash.length > 1 ) location.hash = location.hash;
}
// -->
</script>
Additionally, add this DIFFERENT onLoad to the
<body> opening tag:
<body onLoad="JavaScript:loadSearchHighlight();" onUnload="JavaScript:SmartHLUnload();">
Now add a simple form like this one to your main content. This particular form will
produce a text box and a submit button identical to the example give above.
<form method="get" name="searchhi" onSubmit="JavaScript:NotRefreshHL();">
<input type="text" name="h" />
<input type="submit" value="Go!" />
</form>
And those are all the changes that are needed.
|
|
|
![[Ted and a baby giraffe]](http://links.tedpavlic.com/images/ted_giraffe_cheeks.jpg "[Ted and a baby giraffe]")