Fast jQuery Autocomplete / Typeahead Plugin With jQuery - Autosuggest

File Size: 16.2 KB
Views Total: 2823
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Fast jQuery Autocomplete / Typeahead Plugin With jQuery - Autosuggest

Autosuggest is a simple and fast jQuery autocomplete / typeahead plugin that allows the users to quickly find and select matched items from an autosuggest dropdown list.

The autosuggest list is populated with an array of data objects which can be stored in the JavaScript or gotten via AJAX request. If there are identical suggestions, it will attempt to type ahead of you. Session cache for AJAX call is supported as well.

How to use it:

1. Just include the minified version of jQuery Autosuggest.js plugin after jQuery library and we're ready to go.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.autosuggest.js"></script>

2. Create a text input field where you want to apply the autocomplete / typehead / autosuggest functionality to.

<input type="text" name="country" id="country" autocomplete="off">

3. Prepare your data array for the autosuggest list in the JavaScript as follows:

var countries = ["Afghanistan","Albania","Algeria", ...];

4. Call the plugin and we're done.

$("#country").autosuggest({
  sugggestionsArray: countries
});

5. Advanced usages.

$("#country").autosuggest({

  // Custom Suggestions Provider Callback Function
  suggestionsProvider: null,

  // Array of suggestions
  sugggestionsArray: null,

  // Enable typeahead
  typeAhead: true,

  // For AJAX call
  ajaxurl: null,
  setparams: false,
  urlparams: {}

  // Enable session cache
  cache: false,
  cacheduration: 600,

  // Max number of suggestions to display
  limit: 10,
  
  // fixed width
  fixedwith: null,
  
});

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