jQuery Plugin for Autocomplete Fuzzy Searches | fuzzycomplete

autocomplete-fuzzycomplete

Fuzzycomplete replaces the specified input element with a name similar to select within an HTML form. This jQuery auto-completion plugin displays a dropdown menu full of suggestions as you type into the input field, with support for the fuzzy search function based on the fuse JS library.

How to make use of it:

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

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

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

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

3. Prepare your information for the suggestion listing.

var companies = [
    {"companyName":"Webcodeflow"},
    {"companyName":"Web"},
    {"companyName":"Code Flow"},
    {"companyName":"Umbrella Corp"},
    {"companyName":"Gringotts"},
    {"companyName":"Globex"}
];

4. Enable the plugin on the target input area and completed it.

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

5. The plugin additionally lets you search a number of units of information.

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
  }
}

JSON Based Autocomplete With Fuzzy Search, fuzzy complete Plugin/Github


See Demo And Download

Official Website(aliask): Click Here

This superior jQuery/javascript plugin is developed by aliask. For extra advanced usage, please go to the official website.