リストにinput要素を加えてキーワードでフィルタリング出来るようにする

Result

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>

via

jQuery list filtering