Interactive Search Filter Plugin For jQuery - ckFilter.js

ckFilter.js is a small and easy-to-use jQuery plugin that provides an interactive search filter functionality on any block of content. The plugin enables the user to search and filter through a group of web contents categorized using CSS classes.

How to use it:

1. Categorize & group your contents using CSS classes as these:

<section class="containerObj">
  <div class="ckFilter-obj filter-1 filter-6">
      <img src="http://via.placeholder.com/400x400">
      <div class="content">
          <ul>
              <li>Filter-1</li>
              <li>Filter-6</li>
          </ul>
      </div>
  </div>
  <div class="ckFilter-obj filter-2 filter-5 filter-3">
      <img src="http://via.placeholder.com/400x400">
      <div class="content">
          <ul>
              <li>Filter-1</li>
              <li>Filter-2</li>
              <li>Filter-3</li>
          </ul>
      </div>
  </div>
  <div class="ckFilter-obj filter-3 filter-6">
      <img src="http://via.placeholder.com/400x400">
      <div class="content">
          <ul>
              <li>Filter-3</li>
              <li>Filter-6</li>
          </ul>
      </div>
  </div>
  <div class="ckFilter-obj filter-4 filter-2">
      <img src="http://via.placeholder.com/400x400">
      <div class="content">
          <ul>
              <li>Filter-4</li>
              <li>Filter-2</li>
          </ul>
      </div>
  </div>
  <div class="ckFilter-obj filter-5 filter-1">
      <img src="http://via.placeholder.com/400x400">
      <div class="content">
          <ul>
              <li>Filter-5</li>
              <li>Filter-1</li>
          </ul>
      </div>
  </div>
  <div class="ckFilter-obj filter-6 filter-5 filter-3 filter-4">
      <img src="http://via.placeholder.com/400x400">
      <div class="content">
          <ul>
              <li>Filter-6</li>
              <li>Filter-5</li>
              <li>Filter-3</li>
              <li>Filter-4</li>
          </ul>
      </div>
  </div>
  <div class="ckFilter-obj filter-5 filter-2 filter-4">
      <img src="http://via.placeholder.com/400x400">
      <div class="content">
          <ul>
              <li>Filter-5</li>
              <li>Filter-2</li>
              <li>Filter-4</li>
          </ul>
      </div>
  </div>
  <div class="ckFilter-obj filter-1">
      <img src="http://via.placeholder.com/400x400">
      <div class="content">
          <ul>
              <li>Filter-1</li>
          </ul>
      </div>
  </div>
  <div class="ckFilter-obj filter-5">
      <img src="http://via.placeholder.com/400x400">
      <div class="content">
          <ul>
              <li>Filter-5</li>
          </ul>
      </div>
  </div>
</section>

2. Create your own filter controls using HTML data-filter attribute as these:

<aside class="filter">
  <ul>
    <li class="ckFilter-button" data-filter="filter-1">Filter-1</li>
    <li class="ckFilter-button" data-filter="filter-2">Filter-2</li>
    <li class="ckFilter-button" data-filter="filter-3">Filter-3</li>
    <li class="ckFilter-button" data-filter="filter-4">Filter-4</li>
    <li class="ckFilter-button" data-filter="filter-5">Filter-5</li>
    <li class="ckFilter-button" data-filter="filter-6">Filter-6</li>
  </ul>
</aside>

3. Insert the latest jQuery library and jQuery ckFilter.js into the web page.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery.ckFilter.js"></script>

4. Initialize the plugin by calling the function ckFilter on the top container.

$(document).ready(function () {
  $('#ckFilter').ckFilter({
    reset: true,
    multiple: false,
    animation: true,
    // more options here
  });
});

5. All possible plugin options.

$('#ckFilter').ckFilter({
  containerID : '#' + this.attr('id'),
  buttonClass : '.ckFilter-button',
  filterObj   : '.ckFilter-obj',
  animation   : false,
  activeClass : 'active',
  animationTime : 300,
  animationInterval : 0,
  minWidth : '0',
  dataValue : 'filter',
  reset: false,
  resetClass: '.ckReset',
  multiple : true
});

---

This awesome jQuery plugin is developed by captainKeller. For more Advanced Usages, please check the demo page or visit the official website.