Revision [13059]

This is an old revision of SearchHighlighter made by RolandStens on 2006-02-05 01:31:22.

 

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 and Yahoo. The core of this feature is a JavaScript library by the name of 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 made 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.
 /* 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:
/* ##### searchhi plugin ##### */

.searchword {
  background-color: yellow;
}


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


It is installed on my Wikka so you can see for yourself how it works.
This did not seem to work on older versions of Firefox, see comments.
But version 1.5 works.


CategoryUserContributions
There are 8 comments on this page. [Show comments]
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki