Result
http://jsfiddle.net/kachibito/N9FJc/4/embedded/result,js,css,html
jQuery
$(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) { //listをフォーム化してinput要素を追加 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) { //フィルタ。liからマッチしない要素をスライドアニメーションで非表示 $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));
html
<div id="wrap"> <div class="product-head"> <h1>Product Search</h1> <div id="form"></div> <div class="clear"></div> </div> <ul id="list"> <li><a href="jvascript:void(0)">Japan</a></li> <li><a href="jvascript:void(0)">USA</a></li> <li><a href="jvascript:void(0)">Australia</a></li> <li><a href="jvascript:void(0)">Canada</a></li> <li><a href="jvascript:void(0)">Swiss</a></li> <li><a href="jvascript:void(0)">Russian</a></li> <li><a href="jvascript:void(0)">France</a></li> <li><a href="jvascript:void(0)">Ingland</a></li> <li><a href="jvascript:void(0)">China</a></li> <li><a href="jvascript:void(0)">Thailand</a></li> <li><a href="jvascript:void(0)">Corea</a></li> </ul> </div>