jQuery addClass example

Change class name on click in jQuery

by batcave

HTML

<input type="text" class="input js-filter">

<div class="products">
  <div data-value="name-1" class="product">name-1</div>
  <div data-value="name-2" class="product">name-2</div>
  <div data-value="name-3" class="product">name-3</div>
  <div data-value="name-4" class="product">name-4</div>
  <div data-value="name-5" class="product">name-5</div>
  <div data-value="name-6" class="product">name-6</div>
  <div data-value="name-7" class="product">name-7</div>
  <div data-value="name-8" class="product">name-8</div>
  <div data-value="name-9" class="product">name-9</div>
  <div data-value="name-10" class="product">name-10</div>
  <div data-value="name-11" class="product">name-11</div>
  <div data-value="name-12" class="product">name-12</div>
  <div data-value="name-13" class="product">name-13</div>
  <div data-value="name-14" class="product">name-14</div>
  <div data-value="name-15" class="product">name-15</div>
  <div data-value="name-16" class="product">name-16</div>
  <div data-value="name-17" class="product">name-17</div>
  <div data-value="name-18" class="product">name-18</div>
  <div data-value="name-19" class="product">name-19</div>
  <div data-value="name-20" class="product">name-20</div>
  <div data-value="hey-1" class="product">hey-1</div>
  <div data-value="hey-2" class="product">hey-2</div>
  <div data-value="hey-3" class="product">hey-3</div>
  <div data-value="hey-4" class="product">hey-4</div>
  <div data-value="hey-5" class="product">hey-5</div>
  <div data-value="hey-6" class="product">hey-6</div>
  <div data-value="hey-7" class="product">hey-7</div>
  <div data-value="hey-8" class="product">hey-8</div>
  <div data-value="hey-9" class="product">hey-9</div>
  <div data-value="hey-10" class="product">hey-10</div>
  <div data-value="hey-11" class="product">hey-11</div>
  <div data-value="hey-12" class="product">hey-12</div>
  <div data-value="hey-13" class="product">hey-13</div>
  <div data-value="hey-14" class="product">hey-14</div>
  <div...

CSS

* {
  box-sizing: border-box;
}

.input {
  padding: .5rem;
  margin-bottom: 2rem;
  width: 100%;
}

.product {
  padding: .4rem;
  background-color: #ededed;
  margin-bottom: .4rem;
}

JavaScript

$(document).on('keyup', '.js-filter', function(e) {
  const searchParam = $(this).val();

  $(".products > .product").show().filter(function() {
    return $(this).data('value').indexOf(searchParam) === -1;
  }).hide();
});