ItemSearch

a simple javascript class to enable client-side searching across a list of elements on a page.

by AJLeonardi

HTML

<input type='text' id='search-input'>
<div>
  <ul class='search-container'>
    <li>
      Names:
    </li>
    <li id='1' class='search-item' data-search-string="John Carl">
      John Carl
    </li>
    <li id='2' class='search-item' data-search-string="Samantha Roberts">
      Samantha Roberts
    </li>
    <li id='3' class='search-item' data-search-string="Jimmy Henderson">
      Jimmy Henderson
    </li>
  </ul>
</div>

JavaScript

class ItemSearch {

  constructor(container_class, search_input_id) {
    var instance = this;
    this.item_list = instance.construct_search_list(container_class);
    this.list_length = this.item_list.length;
    this.search_field = document.getElementById(search_input_id);

    this.search_field.addEventListener("input", function(e) {
      var search_string = e.target.value;
      instance.search(search_string);

    }, false);
  }

  construct_search_list(container_class) {
    var class_string = '.' + container_class;
    var $search_elements = $(class_string).children('.search-item');
    var return_list = [];
    $search_elements.each(function(index) {
      var item_dict = {
        string: $(this).data('search-string').toLowerCase(),
        id: $(this).attr('id')
      }
      return_list.push(item_dict);
    });
    return return_list;
  }

  search(search_string) {
    var hide_options = {
      duration: 'fast',
      easing: 'linear',
    };

    search_string = search_string.toLowerCase();

    for (var i = 0; i < this.list_length; i++) {
      var id_string = '#' + this.item_list[i].id;
      if (this.item_list[i].string.includes(search_string) === false) {
        $(id_string).hide(hide_options);
      } else {
        $(id_string).show('fast');
      }
    }
  }
}

$(document).ready(function() {

  //var home_shooter_search = new ItemSearch(home_shooter_list, 'home-search-box');
  var item_search_instance = new ItemSearch('search-container', 'search-input');
});