window.addEvent('domready',function(){ var input = $('filter'); // set the title attribute of every element // to it's text in lowercase $$('ul > li').each(function(item){ item.set('title', item.get('text').toLowerCase()); }); // the function we'll call when the user types var filterList = function(){ var value = input.value.toLowerCase(); $$('li').setStyle('display','none'); // check the title attribute if it contains whatever the user is typing $$('ul > li[title~=' + value + ']').setStyle('display',''); }; // make it happen input.addEvent('keyup', filterList); });
<p><input id="filter" type="text" /></p> <ul> <li>Sonic the Hedgehog</li> <li>Knuckles the Enchinada</li> <li>Tails</li> <li>Amy Rose</li> <li>Dr. Robotnik</li> <li>Rouge</li> <li>Shadow the Hedgehog</li> </ul>