Fast List Filter With Smooth Transitions - jQuery Search Filter

The jQuery Search Filter enables the live search functionality on an HTML list that allows the user to dynamically filter long lists through a search field.

How to use it:

1. Create a live search field next to the html list as follows:

<input type="text" id="search-text" placeholder="search" class="search-box">

<ul id="list">
  <li class="in">List Item 1</li>
  <li class="in">List Item 2</li>
  <li class="in">List Item 3</li>
  <li class="in">List Item 4</li>
  <li class="in">List Item 5</li>
  ...
  <span class="empty-item">No results</span>
</ul>

2. Create a list count that display the number of results.

<span class="list-count"></span>

3. The necessary CSS styles.

.search-box {
  float: left;
  clear: left;
  width: 70%;
  padding: 0.4em;
  font-size: 1em;
  color: #555;
}

.list-count {
  float: left;
  text-align: center;
  width: 30%;
  padding: 0.5em;
  color: #ddd;
}

li {
  transition-property: margin, background-color, border-color;
  transition-duration: 0.4s, 0.2s, 0.2s;
  transition-timing-function: ease-in-out, ease, ease;
}

.empty-item {
  transition-property: opacity;
  transition-duration: 0s;
  transition-delay: 0s;
  transition-timing-function: ease;
}

.empty .empty-item {
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-delay: 0.3s;
  transition-timing-function: ease;
}

.hiding {
  margin-left: -100%;
  opacity: 0.5;
}

.hidden {
  display: none;
}

ul {
  float: left;
  width: 100%;
  margin: 2em 0;
  padding: 0;
  position: relative;
}

ul:before {
  content: "MENU ";
  position: absolute;
  left: -2.8em;
  font-size: 3em;
  text-align: right;
  top: 1.5em;
  color: #ededed;
  font-weight: bold;
  font-family: "Maven Pro", sans-serif;
  transform: rotate(-90deg);
}

li {
  float: left;
  clear: left;
  width: 100%;
  margin: 0.2em 0;
  padding: 0.5em 0.8em;
  list-style: none;
  background-color: #f2f2f2;
  border-left: 5px solid #003842;
  cursor: pointer;
  color: #333;
  position: relative;
  z-index: 2;
}

li:hover {
  background-color: #f9f9f9;
  border-color: #00bde8;
}

.empty-item {
  background: #fff;
  color: #ddd;
  margin: 0.2em 0;
  padding: 0.5em 0.8em;
  font-style: italic;
  border: none;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  float: left;
  clear: left;
  width: 100%;
}

.empty .empty-item {
  opacity: 1;
  visibility: visible;
}

4. Include the latest jQuery JavaScript library at the bottom of the page..

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>

5. The main JavaScript to enable the live search functionality on the list.

$(document).ready(function() {

  var jobCount = $('#list .in').length;
  $('.list-count').text(jobCount + ' items');

  $("#search-text").keyup(function () {

    var searchTerm = $("#search-text").val();
    var listItem = $('#list').children('li');
    var searchSplit = searchTerm.replace(/ /g, "'):containsi('")

  $.extend($.expr[':'], {
  'containsi': function(elem, i, match, array)
  {
    return (elem.textContent || elem.innerText || '').toLowerCase()
    .indexOf((match[3] || "").toLowerCase()) >= 0;
  }
  });


  $("#list li").not(":containsi('" + searchSplit + "')").each(function(e)   {
    $(this).addClass('hiding out').removeClass('in');
    setTimeout(function() {
        $('.out').addClass('hidden');
      }, 300);
  });

  $("#list li:containsi('" + searchSplit + "')").each(function(e) {
    $(this).removeClass('hidden out').addClass('in');
    setTimeout(function() {
        $('.in').removeClass('hiding');
      }, 1);
  });


  var jobCount = $('#list .in').length;
  $('.list-count').text(jobCount + ' items');

  if(jobCount == '0') {
    $('#list').addClass('empty');
  }
  else {
    $('#list').removeClass('empty');
  }

  });

});

---

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