getfluid
3/9/2018 - 7:23 PM

jQuery search filtering, client side script. You'll need to add a data-container to the wrapping element which will be hidden on incorrect m

jQuery search filtering, client side script. You'll need to add a data-container to the wrapping element which will be hidden on incorrect matches, then a data-filter on the elements where you're looking to match strings with.

jquery-search-filter.js
content_copyfile_download
$('.your-search-box').keyup(function(event) {
  var query = $(this).val().toLowerCase();
  var filter = $('[data-filter]');
  var container = $('[data-container]');

  if ($(this).val().length <= 1) {
    $(filter).each(function() {
      var item = $(this).text().slice(0, 1).toLowerCase();

      if (item != query) {
        $(this).closest(container).hide();
      } else {
        $(this).closest(container).show();
      }
    });
  } else {
    $(filter).show();
    $(filter).each(function() {
      var item = $(this).text().toLowerCase();

      if (item.indexOf(query) == -1) {
        $(this).closest(container).hide();
      } else {
        $(this).closest(container).show();
      }
    });
  }

  if ($(this).val().length === 0) {
    $(filter).show();
    $(container).show();
  }
});
jquery-search-filter.html
content_copyfile_download
<input type="search" class="your-search-box" value="Match" />

<div data-container>
  <a href="#" data-filter>Match this Text</a>
</div>

<div data-container>
  <a href="#" data-filter>Not any of this</a>
</div>