Responsive Bootstrap List Filter Plugin With jQuery

File Size: 106 KB
Views Total: 10522
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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.


4. Available plugin options.

  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>';



  • v0.3.3


  • hide cancel button after search



  • bugfixes

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