List Filter

Simple list filtering script that can be used on multiple lists within one instance

by Bart Kalisz

HTML

<div class="container js-list-filter">
  <input type="text" placeholder="Search user" />
  <ul>
    <li>Josh</li>
    <li>Maya</li>
    <li>Eddie</li>
    <li>Bart</li>
    <li>Jane</li>
    <li>Emily</li>
    <li>Laura</li>
    <li>Rob</li>
    <li>Magic</li>
    <li>Bob</li>
    <li>Jonathan</li>
    <li>Jolene</li>
    <li>Audrey</li>
    <li>Andre</li>
  </ul>
</div>

<div class="container js-list-filter">
  <input type="text" placeholder="Search user" />
  <ul>
    <li>Josh</li>
    <li>Maya</li>
    <li>Eddie</li>
    <li>Bart</li>
    <li>Jane</li>
    <li>Emily</li>
    <li>Laura</li>
    <li>Rob</li>
    <li>Magic</li>
    <li>Bob</li>
    <li>Jonathan</li>
    <li>Jolene</li>
    <li>Audrey</li>
    <li>Andre</li>
  </ul>
</div>

<div class="container js-list-filter">
  <input type="text" placeholder="Search user" />
  <ul>
    <li>Josh</li>
    <li>Maya</li>
    <li>Eddie</li>
    <li>Bart</li>
    <li>Jane</li>
    <li>Emily</li>
    <li>Laura</li>
    <li>Rob</li>
    <li>Magic</li>
    <li>Bob</li>
    <li>Jonathan</li>
    <li>Jolene</li>
    <li>Audrey</li>
    <li>Andre</li>
  </ul>
</div>

<div class="container js-list-filter">
  <input type="text" placeholder="Search user" />
  <ul>
    <li>Josh</li>
    <li>Maya</li>
    <li>Eddie</li>
    <li>Bart</li>
    <li>Jane</li>
    <li>Emily</li>
    <li>Laura</li>
    <li>Rob</li>
    <li>Magic</li>
    <li>Bob</li>
    <li>Jonathan</li>
    <li>Jolene</li>
    <li>Audrey</li>
    <li>Andre</li>
  </ul>
</div>

CSS

html, body {
  margin: 0;
  padding: 0;
}

.container {
  float: left;
  width: 25%;
  box-sizing: border-box;
  padding: 10px;
}
.is-hidden {
  display: none !important
}

JavaScript

var defaults = {
	el: ".js-list-filter",
  hiddenClass: "is-hidden"
};

function ListFilter(args) {
	this.config = $.extend({}, defaults, args);
	this.$els = $(this.config.el);

	if (this.$els.length) this.init();
}

ListFilter.prototype.init = function() {
	this.$inputs = this.$els.find("input");

	if (this.$inputs.length) this.listen();
}

ListFilter.prototype.listen = function() {
	this.$inputs
  	.on("focus", this.handleFocus.bind(this))
  	.on("input", this.handleInput.bind(this));
}

ListFilter.prototype.handleFocus = function(event) {
	this.$input = $(event.target);
	this.$items = this.$input.closest(this.$els).find("li");
}

ListFilter.prototype.handleInput = function(event) {
	var term = event.target.value

	if (!term.length) this.$items.removeClass(this.config.hiddenClass);

	for (var i = 0; i < this.$items.length; i++) {
  	var $item = this.$items.eq(i);

    if ($item.text().match(new RegExp(term, "i"))) {
    	$item.removeClass(this.config.hiddenClass);
    } else {
    	$item.addClass(this.config.hiddenClass);
    }
  }
}

new ListFilter();