C# Tutorials and offshore development in India
    Tutorials   Resources   Forum   Communities   Interview   Jobs   Projects   Offshore Development    
Silverlight Tutorials | Mentor | Code Converter | Articles | Code Factory | Computer Jokes | Members | Peer Appraisal | IT Companies | Bookmarks | Revenue Sharing |


Prizes & Awards
My Profile



Active Members
TodayLast 7 Days more...

New Feature: Community Sites: Create your own .NET community website and start earning from Google AdSense ! It's Free !




Highlight Searchtext in Datagrid or in a Page


Posted Date: 14 Aug 2006    Resource Type: Articles    Category: Web Applications
Author: DotNET-HelperMember Level: Gold    
Rating: Points: 3



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......




Responses


No responses found. Be the first to respond and make money from revenue sharing program.

Feedbacks      
Popular Tags   What are tags ?   Search Tags  
(No tags found.)

Post Feedback


This is a strictly moderated forum. Only approved messages will appear in the site. Please use 'Spell Check' in Google toolbar before you submit.
You must Sign In to post a response.
Next Resource: How Design patterns make .net 2.0 a miracle
Previous Resource: XML document dynamicaly
Return to Discussion Resource Index
Post New Resource
Category: Web Applications


Post resources and earn money!
 
Related Resources



dotNet Slackers   BizTalk Adaptors    Web Design


Contact Us    Privacy Policy    Terms Of Use