List.js: Fuzzy Search Plugin Apr 24th, 2012

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

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.

1
2
3
4
5
6
7
8

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

Live example

Check out this -> Listjs.com/examples/fuzzy-search

Implementation

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<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: [
        [ 'fuzzySearch', fuzzyOptions ]
    ]
};

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

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

// Search manually on specific columns
listObj.fuzzySearch('my search', { name: true });

</script>

Options

All options are optional. Simplest implementation is: plugins: [ [ 'fuzzySearch' ] ]

• 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