Filter Div Content based on Textbox Text

by ravimallya

HTML

<div class="col-md-8 col-md-offset-2">
  <h4 class="mrg-top-0">Select a Company
                    </h4>
  <div class="form-group">
    <input type="text" autocomplete="off" class="form-control" id="txtFilter" placeholder="Type name of the company to filter">
  </div>
  <br />
  <ul class="row list-unstyled client-list" id="ulClient">
    <li class="col-sm-6 mrg-20"><a href="#" data-clientid="238" style="background-color: rgb(145, 121, 103);">1ON1 Development</a></li>
    <li class="col-sm-6 mrg-20"><a href="#" data-clientid="240" style="background-color: rgb(11, 89, 178);">3i Infotech</a></li>
    <li class="col-sm-6 mrg-20"><a href="#" data-clientid="252" style="background-color: rgb(110, 56, 16);">ABC Tech</a></li>
    <li class="col-sm-6 mrg-20"><a href="#" data-clientid="181" style="background-color: rgb(158, 83, 73);">Aquatic Environments</a></li>
    <li class="col-sm-6 mrg-20"><a href="#" data-clientid="250" style="background-color: rgb(94, 80, 177);">Aug Mresult Client</a></li>
    <li class="col-sm-6 mrg-20"><a href="#" data-clientid="249" style="background-color: rgb(169, 2, 90);">AugMangalore</a></li>
    <li class="col-sm-6 mrg-20"><a href="#" data-clientid="248" style="background-color: rgb(88, 79, 27);">AugTest</a></li>
    <li class="col-sm-6 mrg-20"><a href="#" data-clientid="234" style="background-color: rgb(6, 70, 169);">BioMarin</a></li>
    <li class="col-sm-6 mrg-20"><a href="#" data-clientid="242" style="background-color: rgb(169, 182, 180);">Bright Horizons</a></li>
    <li class="col-sm-6 mrg-20"><a href="#" data-clientid="246" style="background-color: rgb(189, 160, 170);">CoEvolve</a></li>
    <li class="col-sm-6 mrg-20"><a href="#" data-clientid="229" style="background-color: rgb(163, 189, 28);">Connecticut Children's Medical Center</a></li>
    <li class="col-sm-6 mrg-20"><a href="#" data-clientid="178" style="background-color: rgb(166, 55, 12);">Connecticut Technology Council</a></li>
    <li class="col-sm-6 mrg-20"><a href="#"...

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/*Clients selection Page*/
.client-list {
  list-style:none;
  margin:0;
  padding:0;
}
.client-list li > a {
  display: block;
  padding: 5px 10px;
  color: #fff;
  font-weight: 500;
  text-decoration:none;
  border-radius: 5px;
 font-family: 'Arial', sans-serif;
  font-size: 16px;
  margin-bottom:5px;
  transition: all 0.25s linear;
}
.form-control {
      display: block;
    width: 100%;
    border-radius: 5px;
    padding:5px 10px;
}
.client-list li > a:hover,
.client-list li > a:focus {
  text-decoration: none;
  box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.5);
}

JavaScript

(function($, undefined) {
    $.expr[":"].containsNoCase = function(el, i, m) {
      var search = m[3];
      if (!search) return false;
      return new RegExp(search, "i").test($(el).text());
    };

    $.fn.searchFilter = function(options) {
      var opt = $.extend({
        // target selector
        targetSelector: "",
        // number of characters before search is applied
        charCount: 1
      }, options);

      return this.each(function() {
        var $el = $(this);
        $el.keyup(function() {
          var search = $(this).val();

          var $target = $(opt.targetSelector);
          $target.show();

          if (search && search.length >= opt.charCount)
            $target.not(":containsNoCase(" + search + ")").hide();
        });
      });
    };
  })(jQuery);

  $(document).ready(function() {

    $("#txtFilter").focus();
    $("#txtFilter").searchFilter({
      targetSelector: ".client-list > li"
    })
  });