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

• searchClass String, default: fuzzy-search
  What is the class of the search field?
• location Int, default: 0
  Approximately where in the text is the pattern expected to be found?
• distance Int, default: 100
  Determines how close the match must be to the fuzzy location (specified above). An exact letter match which is ‘distance’ characters away from the fuzzy location would score as a complete mismatch. A distance of 0 requires the match be at the exact location specified, a threshold of 1000 would require a perfect match to be within 800 characters of the fuzzy location to be found using a 0.8 threshold.
• threshold Int, default: 0.4
  At what point does the match algorithm give up. A threshold of 0.0 requires a perfect match (of both letters and location), a threshold of 1.0 would match anything.
• multiSearch Boolean, default: true
  Subtract arguments from the searchString or put searchString as only argument

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('my search');

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

</script>

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