client_management/app/views/admin/site_panel/_sites_list_filter.html.erb

<div id="filter" class="topnav clearfix open">
              <ul class="breadcrumb text-info pull-left">
                <li><a href="/zh_tw/admin/dashboards">網站內容</a><span class="divider">/</span></li><li><a href="/admin/site_panel"><span class="translation_missing" title="translation missing: zh_tw.module_name.client_management">Client Management</span></a><span class="divider">/</span></li><li class="active"><span class="translation_missing" title="translation missing: zh_tw.restful_actions.server_manager">Server Manager</span></li>
              </ul>
                <div class="searchClear pull-left" style="clear: left;">
    <form id="module-search-form">
      <div class="sc-field"><i class="icon-search"></i><i class="icons-cross-3 search-clear" style="display: none;"></i><input type="text" id="filter-input" class="search-query input-medium" placeholder="搜尋" value=""></div>
    </form>
    <img id="search-preloader" src="/assets/preloader.gif" style="height: 40px; position: absolute; left: 220px; top: -5px; display:none;">
  </div>
  <ul class="nav nav-pills filter-nav pull-right">
      <li class="accordion-group">
        <div class="accordion-heading">
          <a href="#collapse-category" data-toggle="collapse" data-parent="#filter" class="accordion-toggle"><%=t(:category)%></a>
        </div>
      </li>
      <li class="accordion-group">
        <div class="accordion-heading">
          <a href="#collapse-tags" data-toggle="collapse" data-parent="#filter" class="accordion-toggle"><%=t(:tags)%></a>
        </div>
      </li>
  </ul>
  <div class="filter-group accordion-group">
      <div class="accordion-body in collapse" id="collapse-category" style="height: auto;">
        <div class="accordion-inner pagination-right">
          <% @categories.each do |category|%>
            <a class="btn btn-small " href="#" id="filter_<%=category.id%>" onclick="filter.addFilter('filters[category][]=<%=category.id%>');$(this).toggleClass('active');return false;"><%=category.title%></a>
          <% end %>
        </div>
        <div class="filter-clear">
          <a href="#" onclick="filter.clearFilter();" class="btn btn-link btn-small"><i class="icons-cycle"></i> 清除</a>
        </div>
      </div>
      <div class="accordion-body collapse" id="collapse-tags">
        <div class="accordion-inner pagination-right">
        </div>
        <div class="filter-clear">
          <a href="#" onclick="filter.clearFilter();" class="btn btn-link btn-small"><i class="icons-cycle"></i> 清除</a>
        </div>
      </div>
  </div>
</div>
<script type="text/javascript">
  var interval = 0;
  var keyword;
  var searchLock=false;

  $("#filter-input").bind("input", function() {queueSearch();});
  $("#module-search-form").submit(function(){queueSearch(); return false; });

  var params = function(key){
    var result = {};
    var datas = window.location.search ? window.location.search.replace('?','').split('&') : []
    datas.map(function(data){
      tmp = data.split("=");
      tmp[1] = decodeURIComponent(tmp[1]);
      if(key){
        if(tmp[0]==key){
          if(tmp[0].indexOf('[]')>=0){
            if(!Array.isArray(result)) result = [];
            result.push(tmp[1]);
          }else{
            result = tmp[1];
          }
        }
      }else{
        if(tmp[0].indexOf('[]')>=0){
          if(typeof(result[tmp[0]]) == "undefined") result[tmp[0]] = [];
          result[tmp[0]].push(tmp[1]);
        }else{
          result[tmp[0]] = tmp[1];
        }
      }
    });
    return result;
  }

  var queueSearch = function(){
    if($("#filter-input").val()!=keyword){
      keyword = $("#filter-input").val();
      interval=500;
      if(!searchLock) moduleSearch();
    }
  }

  var moduleSearch = function(){
    $("#search-preloader").fadeIn();
    searchLock = true;
    if(interval==0){
      url = document.URL;
      url = url.replace('#','');
      if(url.indexOf("keywords=")>=0){
        url = url.replace("keywords="+encodeURIComponent(params("keywords")),"keywords="+keyword)
      }else{
        url = (url.indexOf("?")>=0) ? url+"&keywords="+keyword : url+"?keywords="+keyword
      }
      url = url.replace("page="+params("page"),"page=1");

      history.pushState(null, null, url);
      $.get(url,function(data){
        searchLock = false;
        $("#index_table").html(data);
        bindPagination();
        $("#search-preloader").fadeOut();
      });
    }else{
      interval -= 100;
      setTimeout(moduleSearch,100);
    }
  }

  var bindPagination = function(){
    $(".pagination a").click(function(){
      filter.updateTable($(this).attr('href'),false,true);
      return false;
    });
  }


  var Filter = function(dom){
    var self = this;
    var makeFilters = function(){
      return (window.location.search ? window.location.search.replace('?','').split('&') : []);
    }
    var filters = makeFilters(),
          dom = $(dom),
          mainUrl = window.location.pathname;
    this.updateTable = function(url, goback, is_pagination){
      update = true;
      xurl = (url == null ? ( filters.length ?  mainUrl + "?" + filters.join('&') : mainUrl ) : url);
      $.ajax({
        url : xurl,
        type : "get",
        dataType : "html" 
      }).done(function(data){
        if(is_pagination){
          history.pushState(null, null, decodeURIComponent(xurl));
        }else{
          if(!goback) history.replaceState(null, null, decodeURIComponent(xurl));
        }
        filters = makeFilters();
        dom.html(data);
        bindPagination();
        update = false;
      })
    }
    this.addFilter = function(filter){
      filters = makeFilters();
      $.each(filters,function(idx,data){
        if(typeof(data)=="undefined") return true;
        if(data.indexOf("page=")>-1) filters.splice(idx,1);
      });

      if( (index = filters.indexOf(filter) ) > -1){
        mainUrl = mainUrl.replace(filter,'');
        filters.splice(index,1);
      }else{
        filters.push(filter);
      }

      self.updateTable();
      return false;
    };

    this.clearFilter = function(){
      $(".filter-group a.active").removeClass("active");
      filters = [];
      self.updateTable();
      return false;
    }

    window.onpopstate = function(event){
      if(!update){
        $("#filter-input").val( $.isEmptyObject(params('keywords')) ? "" : params('keywords') );
        self.updateTable(document.location, true);
        $(".filter-group .btn-small").removeClass('active');
        $.each(document.location.search.split('&'),function(key,filter){
          if(filter.split('=')[0].indexOf("keywords")>=0) return true;
          $('#filter_'+filter.split('=')[1]).addClass('active');
        });
      }
      update = false;
    }
  }

  var update = false;
  var filter;
  $(document).ready(function(){
    filter = new Filter("#index_table");
    bindPagination();
  });
</script>