フォームにテキストを入力してリアルタイムに表示を絞り込む

オープンソース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>

参考：簡単なjQueryコードでリストメニューにフィルタリング機能を加える