オープンソースAMIのように、フォームにテキストを入力してリアルタイムに表示を絞り込む方法です。
サンプルはこちら。
事前準備
jQueryを読み込んでおきます。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
JavaScript
/*検索フォーム入力による絞り込み*/ (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 search","action":"#"}), input = $("<input>").attr({"class":"filterinput input-xlarge mb0","type":"text","placeholder":"キーワードで絞り込む"}); $(form).append(input).appendTo(header); $(input) .change( function () { var filter = $(this).val(); if(filter) { $matches = $(list).find('div:Contains(' + filter + ')').parents(); $('.inline3', list).not($matches).slideUp(0); $matches.slideDown(0); } else { $(list).find(".inline3").slideDown(0); } return false; }) .keyup( function () { $(this).change(); }); } $(function () { filterList($("#form"), $("#list")); }); }(jQuery));
HTML
//入力フォームが自動で表示されます。 <div id="form" class="search"></div> //対象のリスト <div id="list"> <div class="inline3"> <div> <a href="#">あ</a> </div> </div> <div class="inline3"> <div> <a href="#">か</a> </div> </div> <div class="inline3"> <div> <a href="#">さ</a> </div> </div> <div class="inline3"> <div> <a href="#">た</a> </div> </div> <div class="inline3"> <div> <a href="#">な</a> </div> </div> </div>