Simle Html List Filter Plugin with jQuery - listfilter

Simle Html List Filter Plugin with jQuery - listfilter
File Size: 78.9 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

listfilter is a extremely simple jQuery plugin that create a html list filter to quickly filter out what you need.

See also:

How to use it:

1. Include jQuery and listfilter plugin on your html page

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.listfilter.min.js"></script>

2. Create a filter for your html list

<form name="filterform">
<label>Filter
<input type="text" name="filterinput" id="filterinput">
</input>
</label>
<input type="button" name="clear" value="Clear" id="clearfilter">
</input>
</form>

3. Create a html list

<ul id="mylist">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>

4. The javascript. Apply a filter to the list

$(document).ready(function () {
  'use strict';

  var filter = $('input#filterinput'), clearfilter = $('input#clearfilter');
  $('ul#mylist').listfilter({
    'filter': filter,
    'clearlink': clearfilter
  });
  
});

5. Default options.

// The input element you wish users to enter text into in order to filter. 
// If none is provided, one will be added automatically.
'filter': null,

// A clickable element, such as a button or link. 
// When clicked, this will clear the text in the filter and reset the list to its default state. 
// If none is provided, one will be added automatically.
'clearlink': null,

// Sometimes you may want to differentiate between adjacent elements in a list by alternating the CSS to improve readability. 
// If alternate is set to true, a class will be applied to every second element in the list. 
// This will remain consistent even when filtered.
'alternate': null,

// If alternate is set to true, the default class to be applied to every other element is 'alternate'. 
// If you don't want to use this, you can pass through an alternative class to apply to alternate elements
'alternateclass': 'alternate',

// You may want to exclude certain elements from filtering, such as the first row in a table. 
// You can apply the default class of nofilter to an element to do this, 
// or you can specify your own nofilter class
'nofilter': 'nofilter',

// A function that is called after the filtering is complete
'callback': null

Change Log:

v1.0.10 (2016-07-27)

  • prevent browser errors firing callbacks only when they have actually been defined

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