$(document).ready(function(){ jQuery.expr[':'].Contains = function(a,i,m){ return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0; }; function filterList(header, list) { var form = $("<form>").attr({"class":"filterform","action":"#"}), input = $("<input>").attr({"class":"filterinput","type":"text"}); $(form).append(input).appendTo(header); $(input) .change( function () { var filter = $(this).val(); if(filter) { $matches = $(list).find('a:Contains(' + filter + ')').parent(); $('li', list).not($matches).slideUp(); $matches.slideDown(); } else { $(list).find("li").slideDown(); } return false; }) .keyup( function () { $(this).change(); }); } $(function () { filterList($("#form"), $("#list")); }); }(jQuery));
<div id="wrap"> <div class="product-head"> <h1>list search</h1> <div id="form"></div> <div class="clear"></div> </div> <ul id="list"> <li><a href="#/Apple/">Apple</a></li> <li><a href="#/Squash/">Acorn Squash</a></li> <li><a href="#/Broccoli/">Broccoli</a></li> <li><a href="#/Carrot/">Carrot</a></li> <li><a href="#/Celery/">Celery</a></li> <li><a href="#/Lettuce/">Lettuce</a></li> <li><a href="#/Mushroom/">Mushroom</a></li> <li><a href="#/Onion/">Onion</a></li> <li><a href="#/Potato/">Potato</a></li> <li><a href="#/Pumpkin/">Pumpkin</a></li> <li><a href="#/Radish/">Radish</a></li> <li><a href="#/Squash/">Squash</a></li> <li><a href="#/strawberry/">Strawberry</a></li> <li><a href="#/SugarSnaps/">Sugar Snaps</a></li> <li><a href="#/tomato/">Tomato</a></li> </ul> </div>