List Filter

Dari sini: http://kilianvalkhof.com/uploads/listfilter/

by xaliber

HTML

<section id="content_sidebar"><h3>Kategori</h3><ul class="first" style="
    overflow: auto;
    height: 200px;
"><li><a href="/pakaian/jual"><span>Pakaian</span> (137496)</a></li><li><a href="/buku/jual"><span>Buku</span> (65584)</a></li><li><a href="/aksesoris_handphone/jual"><span>Aksesoris Handphone</span> (47215)</a></li><li><a href="/tas/jual"><span>Tas</span> (45417)</a></li><li style="display: list-item;" class="maxlist-hidden"><a href="/sepatu/jual"><span>Sepatu</span> (30781)</a></li><li style="display: list-item;" class="maxlist-hidden"><a href="/mainan/jual"><span>Mainan</span> (14304)</a></li><li style="display: list-item;" class="maxlist-hidden"><a href="/all/jual"><span> Makeup</span> (11977)</a></li><li style="display: list-item;" class="maxlist-hidden"><a href="/makeup/jual"><span>Makeup</span> (8960)</a></li><li style="display: list-item;" class="maxlist-hidden"><a href="/aksesoris_kamera/jual"><span>Aksesoris Kamera</span> (8172)</a></li><li style="display: list-item;" class="maxlist-hidden"><a href="/jam_tangan/jual"><span>Jam Tangan</span> (7649)</a></li><li style="display: list-item;" class="maxlist-hidden"><a href="/aksesoris_komputer/jual"><span>Aksesoris Komputer</span> (7281)</a></li><li style="display: list-item;" class="maxlist-hidden"><a href="/handphone/jual"><span>Handphone</span> (6911)</a></li><li style="display: list-item;" class="maxlist-hidden"><a href="/kursi/jual"><span>Kursi</span> (6256)</a></li><li style="display: list-item;" class="maxlist-hidden"><a href="/memorycard/jual"><span>Memorycard</span> (5569)</a></li><li style="display: list-item;" class="maxlist-hidden"><a href="/headphone/jual"><span>Headphone</span> (4672)</a></li><li style="display: list-item;" class="maxlist-hidden"><a href="/makanan/jual"><span>Makanan</span> (4541)</a></li><li style="display: list-item;" class="maxlist-hidden"><a href="/all/jual"><span>Dekorasi</span> (4249)</a></li><li style="display: list-item;" class="maxlist-hidden"><a...

JavaScript

/*
 * jQuery.listFilter
 * Copyright (c) 2010 Kilian Valkhog
 */
 
 (function ($) {
  // custom css expression for a case-insensitive contains()
  jQuery.expr[':'].Contains = function(a,i,m){
      return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
  };


  function listFilter(header, list) { // header is any element, list is an unordered list
    // create and add the filter form to the header
    var form = $("<form>").attr({"class":"filterform","action":"#"}),
        input = $("<input>").attr({"class":"filterinput","type":"text","placeholder":"Ketik pencarian..."});
    $(form).append(input).insertAfter(header);

    $(input)
      .change( function () {
        var filter = $(this).val();
        if(filter) {
          // this finds all links in a list that contain the input,
          // and hide the ones not containing the input while showing the ones that do
          $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();
          $(list).find("a:Contains(" + filter + ")").parent().slideDown();
        } else {
          $(list).find("li").slideDown();
        }
        return false;
      })
    .keyup( function () {
        // fire the above change event after every letter
        $(this).change();
    });
  }


  //ondomready
  $(function () {
    listFilter($("h3"), $(".first"));
  });
}(jQuery));