Responsive Bootstrap List Filter Plugin With jQuery

Bootstrap List Filter is a lightweight jQuery plugin for filtering long Bootstrap list that supports both static and dynamic content.

Basic usage:

1. Include the JavaScript file bootstrap-list-filter.src.js on the webpage. Make sure you first have jQuery library and Bootstrap framework installed.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="bootstrap-list-filter.src.js"></script>

2. Create a normal search input to filter your Bootstrap list.

<input class="form-control" id="searchinput" type="search" placeholder="Search...">

3. Call the function on the target Bootstrap list and done.

$('#searchlist').btsListFilter('#searchinput');

4. Available plugin options.

$('#searchlist').btsListFilter('#searchinput',{
  delay: 300,
  minLength: 1,
  initial: true,
  casesensitive: false,
  eventKey: 'keyup',
  resetOnBlur: true,
  sourceData: null,
  sourceTmpl: '<a class="list-group-item" href="#"><span>{title}</span></a>',
  sourceNode: function(data) {
    return tmpl(opts.sourceTmpl, data);
  },
  emptyNode: function(data) {
    return '<a class="list-group-item well" href="#"><span>No Results</span></a>';
  },
  loadingClass: 'bts-loading-list',
  itemClassTmp: 'bts-dynamic-item',
  itemEl: '.list-group-item',
  itemChild: null,
  itemFilter: function(item, val) {
    //val = val.replace(new RegExp("^[.]$|[\[\]|()*]",'g'),'');
    //val = val.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
    val = val && val.replace(new RegExp("[({[^.$*+?\\\]})]","g"),'');
    
    var text = $(item).text(),
      i = opts.initial?'^':'',
      regSearch = new RegExp(i + val, opts.casesensitive?'':'i');
    return regSearch.test( text );
  },
  cancelNode: function() {
    return '<span class="btn glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>';
  }
});

Changelog:

2021-07-25

• v0.3.3

2016-05-17

• hide cancel button after search

2016-04-22

• update

2016-04-09

• bugfixes

---

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