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

Fuzzy search plugin

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

To use the plugin you first need to download it:

Via GitHub

Download list.fuzzysearch.js

Via Bower

bower install list.fuzzysearch.js

Via Component

component install javve/list.fuzzysearch.js
<% /*

Via CDNJS

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/list.fuzzysearch.js/0.1.0/list.fuzzysearch.min.js" />
*/ %>

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.search('gu thre') // return 1 item

Implementation

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

<script>

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

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: true });

</script>

Options

All options are optional. Simplest implementation is:

plugins: [ ListFuzzySearch() ]

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

Next topic: Build your own plugin ›