Sieve jQuery plugin with mark.js

An example of the sieve jQuery plugin with mark.js – a keyword highlighter

by Ryan Brackett

HTML

<script src="https://cdn.jsdelivr.net/g/[email protected],[email protected](jquery.mark.min.js)"></script>
<script src="https://rmm5t.github.io/jquery-sieve/dist/jquery.sieve.min.js"></script>
<table class="sieve">

  <tbody>
    <tr data-group="GROUP A">
      <td>Group A item</td>

    </tr>
    <tr data-group="GROUP B">
      <td>Group B item</td>

    </tr>
    <tr data-group="GROUP B">
      <td>Another Group B item</td>

    </tr>
    <tr data-group="GROUP B">
      <td>Another Group B item</td>

    </tr>
    <tr data-group="GROUP A">
      <td>Another Group A item</td>

    </tr>
  </tbody>
</table>

CSS

td {
  padding-right: 40px;
}

JavaScript

$(function() {
  var $context = $("table.sieve");
  $context.sieve({
    complete: function() {
      var term = this.searchInput[0].value,
        $items = $context.find(this.itemSelector);
      $items.unmark({
        done: function() {
          $items.mark(term);
        }
      });
    }
  });
});



$(function($) {
  var $list = $('#group');
  var lists = {};
  var $newLists = $();

  $list.children().each(function() {
    var group = $(this).data('group');
    if (!lists[group]) lists[group] = [];
    lists[group].push(this);
  });

  $.each(lists, function(group, items) {
    var $newList = $('<div class="group"/>').append(items).prepend("<h3>" + group + "</h3>");
    $newLists = $newLists.add($newList);
  });

  $list.replaceWith($newLists);

});