Introduction
This article explains how we can Highlight Search text in a Datagrid or a page using some javascript functionality
Place the below code in the tag
<script language="javascript"> var times = 0; function hex( n ) { return ( n<16 ? '0' : '' ) + n.toString(16); } function highlight( s, o ) { if( !s ) { return 0; } var d = window.document, f = d.Form1.elements; // s=window.document.Form1.txtsearch.value; // o=window.document.Form1.dg; s = s.replace( /([\\|^$()[\]{}.*+?])/g, '\\$1' ); if( /^\s*$/.test( s ) ) { return 0; } s = s.split( /\s+/ ).join( '|' ); o = [ o || d.documentElement || d.documentElement ]; var r = new RegExp( s, 'gi' ), h = d.createElement( 'span' ), i = 0, j, k, l, m, n=0, t; h.style.color = '#000'; h.style.backgroundColor = '#'+( times%2 ? ''+hex(((times+1)%5)*51)+'ff' : 'ff'+hex((times%5)*51)+'' )+'00'; times++; do { m = o[i]; if( m.nodeType===3 ) { r.lastIndex = 0; l = r.exec(m.nodeValue); if( l !== null ) { k = l[0].length; if( r.lastIndex > k ) { m.splitText( r.lastIndex - k ); m = m.nextSibling; } if( m.nodeValue.length > k ) { m.splitText(k); o[i++] = m.nextSibling; } t = h.cloneNode( true ); t.appendChild( d.createTextNode( l[0] ) );n++; m.parentNode.replaceChild( t, m ); } } else { j = m.childNodes.length; while ( j ) { o[i++] = m.childNodes.item( --j ); } } } while( i-- ); return n; }
function unhighlight( s, o ) { var d = window.document; s = s.replace(/([\\|^$()[\]{}.*+?])/g, '\\$1').split( /\s+/ ).join( '|' ); o = o || d.documentElement || d.body; var a = o.getElementsByTagName( 'span' ), i = a.length, j, re = new RegExp( '^' + s + '$', 'i' ); while( i-- ) { j = a[i].firstChild; if( j ) { if( j.nodeType===3 && re.test( j.nodeValue ) ) { a[i].parentNode.replaceChild( d.createTextNode( j.nodeValue ), a[i] ); } } } return false; } </script>
In the body tag call the javascript function "highlight" on the "onload" event
It is as simple as this......
|
No responses found. Be the first to respond and make money from revenue sharing program.
|