Search a list (and mark matches)

by Bianca Kuehweidner

HTML

<input type="text" id="search-dinosaurs" placeholder="Search for Dinosaurs (start typing)" />
 
<ul id="dino-list">
  <li>Diplo<BR>docus</li>
  <li>Stego<FONT COLOR="RED">saurus</FONT></li>
  <li>Triceratops</li>
  <li>Pteradactyl</li>
  <li>Tyrannosaurus Rex</li>
  <li>Protoceratops</li>
  <li>Iguanadon</li>
  <li>Velociraptor</li>
</ul>

JavaScript

$(function(){
	$('#dino-list>li').hide();
	$('#search-dinosaurs').on('keyup',function(){search(this.value)})
})


function search(txt){
	var target = $('#dino-list');
	// reset content
	var content = target.html(); 
	if (typeof target.data('content')!='undefined') {
		target.html(target.data('content'));
	} else target.data('content',content);
	$('#dino-list>li').hide();
  
	if (txt!='') {
		// begin search 
		$('#dino-list').find('*').contents().each(function() { 
			if (this.nodeType === 3) {
        // wrap text node with 'em' 
				$(this).replaceWith(this.nodeValue.replace(new RegExp('('+txt+')','gi'),'<em>$1</em>'))
			}; 
		});
    // display li with em
		$('em',target).each(function(){
			$(this).closest('li').show();
		})
	}
}