Tiny Flexible Fuzzy Search jQuery Plugin - fuzzy.js

A lightweight and flexible fuzzy search jQuery plugin used to search for text in a data set using the approximate string matching technique.

It allows you to find relevant results that match a term approximately instead of exactly. Useful for site search, product filter, input autocomplete, and much more.

How to use it:

1. Load the jquery.fuzzy.js library after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.fuzzy.js"></script>

2. Create a search field to filter through your content.

<input type="text" id="searchBar" />

3. Prepare your dataset as follows:

<div id="dataset">
  <div class="row" id="row1">Content 1</div>
  <div class="row" id="row2">Content 2</div>
  <div class="row" id="row3">Content 3</div>
  ...
</div>

var dataset = [];
var i = 1;
$('div#dataset .row').each(function(){
  dataset.push({title: $(this).text(), id: $(this).attr('id')});
});

4. Call the plugin on the search field to enable the fuzzy search:

$('#searchBar')
  .fuzzy({
    dataset : dataset,
    searchkey: 'title'
  })
  
  .on('fuzzy.clear', function(e, matches){
    // delete previously highlighted rows
    $('.row.highlight').remove();
    // Show rows
    $('div#dataset .row').show();
  })

  .on('fuzzy.search', function(e, matches){
    // Matches will be the same as dataset, except it now has a new key: hlString (highlight string)
    // delete previously highlighted rows
    $('.row.highlight').remove();
    // Hide rows
    $('div#dataset .row').hide();

    var i;
    for (i in matches) {
      var match = matches[i];
      // Use the id to show the highlighted string
      $row = $('<div class="row highlight">'+match['hlString']+'</div>');
      $('#'+match.id).after($row);
    }
});

5. Determine the min number of characters typed in the search field to activate the fuzzy search functionality. Default: 3.

$('#searchBar')
.fuzzy({
  dataset : dataset,
  searchkey: 'title',
  minLength: 1,
})

---

This awesome jQuery plugin is developed by kedomingo. For more Advanced Usages, please check the demo page or visit the official website.