=====Highlight Searched-for Text=====

The following code implements a feature that will highlight the search word in the pages that where found by TextSearch or by Google, Yahoo and many other search engines. The core of this feature is a JavaScript library by the name of [[http://www.kryogenix.org/code/browser/searchhi/ | searchhi]].

From the searchhi website:
//The searchhi JavaScript library is a way of automatically highlighting words on a page when that page was reached by a search engine. In essence, if you search, for example, Google for some words, and then follow a link from the search results to a searchhi enabled page, the words you searched for will be highlighted on that page.// 

First I had to make a few minor changes to this JavaScript libary. This to make it aware of the TextSearch activity.
The resulting file (searchhi.js) is then copied in the //3rdparty/plugins/searchhi// directory. Also make sure that your create a **.htaccess** file in the same directory with the following content:
%%
<IfModule mod_rewrite.c>
RewriteEngine off
</IfModule>
%%

Then copy the **searchhi.js** file into the //3rdparty/plugins/searchhi// directory.
%%(javascript)
 /* http://www.kryogenix.org/code/browser/searchhi/ */
/* Modified 20021006 to fix query string parsing and add case insensitivity */
function highlightWord(node,word) {
	// Iterate into this nodes childNodes
	if (node.hasChildNodes) {
		var hi_cn;
		for (hi_cn=0;hi_cn<node.childNodes.length;hi_cn++) {
			highlightWord(node.childNodes[hi_cn],word);
		}
	}
	
	// And do this node itself
	if (node.nodeType == 3) { // text node
		tempNodeVal = node.nodeValue.toLowerCase();
		tempWordVal = word.toLowerCase();
		if (tempNodeVal.indexOf(tempWordVal) != -1) {
			pn = node.parentNode;
			if (pn.className != "searchword") {
				// word has not already been highlighted!
				nv = node.nodeValue;
				ni = tempNodeVal.indexOf(tempWordVal);
				// Create a load of replacement nodes
				before = document.createTextNode(nv.substr(0,ni));
				docWordVal = nv.substr(ni,word.length);
				after = document.createTextNode(nv.substr(ni+word.length));
				hiwordtext = document.createTextNode(docWordVal);
				hiword = document.createElement("span");
				hiword.className = "searchword";
				hiword.appendChild(hiwordtext);
				pn.insertBefore(before,node);
				pn.insertBefore(hiword,node);
				pn.insertBefore(after,node);
				pn.removeChild(node);
			}
		}
	}
}

function SearchHighlight() {
	if (!document.createElement) return;
	ref = document.referrer;
	if (ref.indexOf('?') == -1) return;
	qs = ref.substr(ref.indexOf('?')+1);
	qsa = qs.split('&');
	for (i=0;i<qsa.length;i++) {
		qsip = qsa[i].split('=');
			if (qsip.length == 1) continue;
			if (qsip[0] == 'q' || qsip[0] == 'p' || qsip[0] == 'phrase') { // q= for Google, p= for Yahoo, phrase for wikka
			words = unescape(qsip[1].replace(/\+/g,' ')).split(/\s+/);
					for (w=0;w<words.length;w++) {
				highlightWord(document.getElementsByTagName("body")[0],words[w]);
					}
			}
	}
}

window.onload = SearchHighlight;
%%

Now all that rest us is two small changes to the **wikka.css** file and to the **header.php** action.

In **css/wikka.css** add the following lines:
%%(css)
/* ##### searchhi plugin ##### */

.searchword {
  background-color: yellow;
}
%%

In the **actions/header.php** file add the following code just before the **</HEAD>** tag:
%%(html4strict)
<script src="3rdparty/plugins/searchhi/searchhi.js" type="text/javascript"></script>
%%

It is installed on [[http://stens.ca/kb | my Wikka]] so you can see for yourself how it works.

----
CategoryUserContributions