Quick Search Sort-Filter In JavaScript Plugin – listjs

File Size: 7.26 KB
Views Total: 1773 views
Last Update:January 01, 1970
Publish Date: January 01, 1970
Official Website: Go to website
License: MIT
Plugin Author:
Demo    Download

List.js is JavaScript plugin for code is simple, tiny, invisible, faster and effective vanilla Javascript that’s provides search, sort, filters and sorting functionality to plain HTML tables or lists or data.

Basic idea:

  • Hidden code with simple interaction
  • Can be applied to the existing HTML
  • Not dependent in any other code
  • Fast way to implement
  • Minified and gzip code which is tiny
  • Can handle huge amount of data


  • Works with different data types like lists, tables and raw data as well. Eg.,
    • Search functionality
    • Filter feature
    • Functionality to add, edit, remove items using simple template system
    • Additional Plugins
    • Multiple Browser support including Chrome, Safari, Firefox and IE9+

id or element
Id the component where the listing area ought to be initialized. OR the true element itself.


A number of the alternative parameters are needed at some timesvalueNames
ID to thing template part or a series of HTML. May also function as a function that receives a worth thing and which has to return the whole thing’s HTML as a series.

How Use :

Add JavaScript in head Section :

<script src="list.js/1.5.0/list.min.js"></script>

Add Html Code In your File :

<div id="users">
  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort by name

  <ul class="list">
      <h3 class="name">Jonny Stromberg</h3>
      <p class="born">1986</p>
      <h3 class="name">Jonas Arnklint</h3>
      <p class="born">1985</p>
      <h3 class="name">Martina Elm</h3>
      <p class="born">1986</p>
      <h3 class="name">Gustaf Lindqvist</h3>
      <p class="born">1983</p>


Add Css for better Style in table element :

h2 {
.list {
  padding:20px 0 0;
.list > li {
  background-color: #eee;
  box-shadow: inset 0 1px 0 #fff;
.avatar {
  max-width: 150px;
img {
  max-width: 100%;
h3 {
  font-size: 16px;
  margin:0 0 0.3rem;
  font-weight: normal;
p {

input {
  border:solid 1px #ccc;
  border-radius: 5px;
  padding:7px 14px;
input:focus {
.sort {
  padding:8px 30px;
  border-radius: 6px;
  text-decoration: none;
  background-color: #28a8e0;
.sort:hover {
  text-decoration: none;
.sort:focus {
.sort:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  position: relative;
.sort.asc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  position: relative;
.sort.desc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #fff;
  position: relative;

Add jS Script for call this function :

var options = {
  valueNames: [ 'name', 'born' ]

var userList = new List('users', options);

var valueNames = [‘name’, ‘city’];

  • Jonny 1986

var valueNames = [
{ data: [‘id’] },
{ name: ‘timestamp’, attr: ‘data-timestamp’ },
{ name: ‘link’, attr: ‘href’ },
{ name: ‘image’, attr: ‘src’ }
var options = {
item: “”
// or
var options = {
item: ‘cool-item-id’
// or
var options = {
item: function(values) {
return <li><span class='name'>${values.name}</span><span class='city'>${values.city}</span></li>;

What’s the course of this list-container?
What’s the course of the research area?
Limit searching to just these column titles? Default is to search all columns.
Delay in milliseconds after last keypress in hunt area before hunt begins. 250→750 is great for really large lists.
What’s the course of this kind buttons?
Whether there are already things in the record to that the List.js-script is inserted, then if the indexing be accomplished in a asynchronous manner? Great for big listings (> 500 things ).
Defines the number of things which ought to be observable at precisely exactly the exact identical moment. This impacts functionality.
Which item ought to be displayed as the initial one.
Values to increase the listing on initialization.
The element node which comprises the whole listing region.
The component containing all products.
An Array of Item-objects from the listing.
The now visible things in the record
The items fitting the active filter and hunt.
Returns true if the list is searched.
Returns true if there’s an active filter.


add(values, callback)
Adds a couple of items to the record.

listObj.add({ name: “Jonny”, city: “Stockholm” });

{ name: “Gustaf”, city: “Sundsvall” }
, { name: “Jonas”, city: “Berlin” }
In case callback is put then things are added into the listing in a asynchronous manner, along with the callback is called if all of the things are inserted. This is particularly helpful when adding quite many things (200+ or something), or in the event that you just enjoy the asynchronous programming style.
listObj.add(arrayWithManyManyItems, function(items) {
console.log(‘All ‘ + items.length + ‘ were added!’);
remove(valueName, value)
Removes items in the record in which the value called valueName has worth worth . Returns the amount of things that where eliminated.
itemsInList = [
{ id: 1, name: “Jonny” }
, { id: 2, name “Gustaf” }
listObj.remove(“id”, 1); // return 1
get(valueName, value)
Returns values in the record in which the value called valueName has worth worth
itemsInList = [
{ id: 1, name: “Jonny” }
, { id: 2, name “Gustaf” }
listObj.get(“id”, 2); // return { id: 2, name “Gustaf” }
sort(valueName, {
order: ‘desc’,
alphabet: undefined,
insensitive: true,
sortFunction: undefined
Sorts the record based on worth that the at the column called valueName. The decoration alternative is used whenever you have non-english decoration where JavaScript do not understand how to form a few characters .
listObj.sort(‘name’, { order: “asc” }); // Sorts the list in abc-order based on names
listObj.sort(‘name’, { order: “desc” }); // Sorts the list in zxy-order based on names

// Sort swedish characters correcly, case-insensitive.
listObj.sort(‘name’, { alphabet: “ABCDEFGHIJKLMNOPQRSTUVXYZÅÄÖabcdefghijklmnopqrstuvxyzåäö” });

// Sort swedish characters correcly, case-sensitive.
listObj.sort(‘name’, { alphabet: “AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvXxYyZzÅåÄäÖö” });

// Alphabet could also be on the actual listObj via
listObj.alphabet = “AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvXxYyZzÅåÄäÖö”;

search(searchString, columns, searchFunction)
itemsInList = [
{ id: 1, name: “Jonny Stromberg”, born: 1986 }
, { id: 2, name “Jonas Arnklint”, born: 1985 }
, { id: 3, name “Martina Elm”, born: 1986 }
, { id: 4, name “Gustaf Lindqvist”, born: 1983 }
, { id: 5, name “Jonny Strandberg”, born: 1990 }

listObj.search(‘Jonny’); // Only items with name Jonny are shown (also returns these items)

listObj.search(); // Show all items in list

listObj.search(‘Jonny’, [‘name’]); // Only search in the ‘name’ column

Space-separated words match in any order using logical AND. Surround a phrase in quotes for exact matches:
listObj.search(‘Jon 198’); // Items that match Jon AND 198

listObj.search(‘”Jonny S” 1990’); // Items that match “Jonny S” AND 1990

Optionally your own search function can be used:
listObj.search(‘Jonny’, searchFunction); // Custom search for Jonny

listObj.search(‘Jonny’, [‘name’], searchFunction); // Custom search in the ‘name’ column

function searchFunction(searchString, columns) {
for (var k = 0, kl = listObj.items.length; k < kl; k++) {
listObj.items[k].found = false;
// Insert your custom search logic here, set found = true

Removes all items from the list

itemsInList = [
{ id: 1, name: “Jonny” }
, { id: 2, name “Gustaf” }
, { id: 3, name “Jonas” }

listObj.filter(function(item) {
if (item.values().id > 1) {
return true;
} else {
return false;
}); // Only items with id > 1 are shown in list

listObj.filter(); // Remove all filters

Returns the size of the list.
show(i, page)
Shows page number of items from i. Use for paging etc.
itemsInList = [
{ id: 1, name: “Jonny” }
, { id: 2, name “Gustaf” }
, { id: 3, name “Jonas” }
, { id: 4, name “Egon” }
, { id: 5, name “Frank” }
, { id: 6, name “Ester” }

listObj.show(4, 3); // Display item 4,5,6
Updates the present condition of the listing. Meaning if you for example hides some things together with all the itemObj.hide() system then you’ve got to telephone listObj.update() if you would like the paging to upgrade.

Re-index record from HTML. Great to use when the HTML was affected by something besides List.js.
on(event, callback)
Submit callback once listing have been upgraded (actuated by upgrade (), that can be used by plenty of techniques ). Utilize upgraded as the Occasion.
Avaliable events
• updated
• searchStart
• searchComplete
• filterStart
• filterComplete
• sortStart
• sortComplete

Thanks for make jQuery plugin is developed by For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :


Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.

Related jQuery Plugins

You Might Also Like