雑コヒ

index.html.erb

<%= form_tag nil, class: "form-inline js-nyan-filter" do %>
  <div class="form-group">
    <%= text_field_tag :key1, params[:key1], class: "form-control js-nyan-input", placeholder: "key1" %>
  </div>
  <div class="form-group">
    <%= text_field_tag :key2, params[:key2], class: "form-control js-nyan-input", placeholder: "key2" %>
  </div>
<% end %>

<span class="js-nyan-count"><%= @nyans.size %></span>件（全<%= @nyans.size %>件）

<table class="table table-striped">
  <thead>
    <tr>
      <th nowrap>ID</th>
      <th nowrap>key1</th>
      <th nowrap>key2</th>
    </tr>
  </thead>
  <tbody>
    <% @nyans.each do |nyan| %>
      <tr class="js-nyan-row" data-json="<%= nyan.to_json %>">
        <td><%= nyan.id %></td>
        <td><%= nyan.key1 %></td>
        <td><%= nyan.key2 %></td>
      </tr>
    <% end %>
  </tbody>
</table>

nyan_filter.js.coffee

applyNyanFilter = (event) ->
  $form  = $ 'form.js-nyan-filter'
  $count = $ 'span.js-nyan-count'
  $rows  = $ 'tr.nyan-row'
  
  # 一旦全部表示
  $rows.show()

  params = $form.serializeArray()
  # 何らかのフィルタ処理して条件にマッチしないやつ非表示にする
  
  $count.html $rows.filter(':visible').length

$document = $ document
$document.on 'keyup change', 'form.js-nyan-filter input.js-nyan-input', applyNyanFilter