JSON Based Autocomplete With Fuzzy Search - jQuery fuzzyComplete

JSON Based Autocomplete With Fuzzy Search - jQuery fuzzyComplete
File Size: 16.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

How to use it:

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
  allowFreeInput: false,
  fuseOptions:{
    // fuse.js options
  }
}

Changelog:

2019-04-17

  • Adding Customizable Resultsbox Rows & Customizable Display Results in Input Box
  • Adding ability for fuzzy complete to accept dynamic results
  • Added displayValue option and added to examples and README
  • Adding extraData and allowFreeInput option

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