JSON Based Autocomplete With Fuzzy Search - jQuery fuzzyComplete

JSON Based Autocomplete With Fuzzy Search - jQuery fuzzyComplete

fuzzyComplete is a jQuery autocomplete plugin which displays a dropdown list populated with suggestions while typing in an input field, with support for the fuzzy search functionality based on the fuse.js library.

1. Insert the necessary jQuery and fuse.js JavaScript libraries into the page.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
          
</script>
<script src="fuse.min.js"></script>

2. Download and insert the fuzzyComplete plugin's script after jQuery.

<script src="fuzzycomplete.min.js"></script>

3. Prepare your data for the suggestion list.

var companies = [
    {"companyName":"Aperture Science"},
    {"companyName":"MomCorp"},
    {"companyName":"Wayne Enterprises"},
    {"companyName":"Umbrella Corp"},
    {"companyName":"Gringotts"},
    {"companyName":"Globex"}
];

4. Enable the plugin on the target input field and done.

<input type="text" id="companyPicker" name="company">
$(document).ready(function(){
  $("#companyPicker").fuzzyComplete(companies);
});

5. The plugin also allows you to search multiple sets of data.

var airports = [
    {"airportCode":"MEL","cityName":"Melbourne, Australia"},
    {"airportCode":"LAX","cityName":"Los Angeles, USA"},
    {"airportCode":"LHR","cityName":"Heathrow, London"},
    {"airportCode":"HKG","cityName":"Hong Kong"},
    {"airportCode":"NRT","cityName":"Narita, Tokyo, Japan"},
    {"airportCode":"FRA","cityName":"Frankfurt, Germany"}
  ];
var fuseOptions = { keys: ["airportCode", "cityName"] };
var options = { display: "cityName", key: "airportCode", fuseOptions: fuseOptions };
$(document).ready(function(){
  $("#airportPicker").fuzzyComplete(airports, options);
}

6. All plugin's default options.

{
  display: Object.keys(jsonData[0])[0],
  key: Object.keys(jsonData[0])[0],
  resultsLimit: 4, // max number of results
  fuseOptions:{
    // fuse.js options
  }
}

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

  • Publication date: 10.01.2018
  • Source