How to make use of 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 by means of 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 allow 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 variety of characters typed within the search field to activate the fuzzy search performance.

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

Simple Online Code Editor! Support React, HTML, CSS, Javascript | PenEditor

Tiny Flexible Fuzzy Search jQuery Plugin, jQuery Fuzzy search plugin/Github

See Demo And Download