--- layout: default title: Fuzzy search plugin ---

Fuzzy search

Note: The fuzzy search plugin is deprecated since v1.5.0, it's now bundled into List.js. Read the old docs here.

The difference between Fuzzy Search and List.js default search

The default search will conduct a time efficient search for an exact match in the content searched, while the fuzzy search will render results depending on if they are included anywhere in the content.

Basic example

var items = [
    { character: "Guybrush Threepwood", game: "The Secret of Monkey Island" },
    { character: "Manny Calavera", game: "Grim Fandango" },
    { character: "Bernard Bernoulli", game: "Maniac Mansion" }
];

list.search('gu thre'); // return none
list.fuzzySearch('gu thre') // return 1 item

Options

All options are optional. Simplest implementation is:

new List(id, { fuzzySearch: options });

Implementation

<div id="list-id">
  <input class="fuzzy-search" />
  <ul class="list">
    / A bunch of items /
  </ul>
</div>

<script>

var options = {
  valueNames: [ 'name', 'category' ],
  fuzzySearch: {
    searchClass: "fuzzy-search",
    location: 0,
    distance: 100,
    threshold: 0.4,
    multiSearch: true
  }
};

var listObj = new List('list-id', options);

// Search manually
listObj.fuzzySearch.search('my search');

// Search manually on specific columns
listObj.fuzzySearch.search('my search', [ 'name' ]);

</script>

A big thanks to LuukvE who made a commit from which I could create this Fuzzy Search plugin.

Next topic: Build your own plugin ›