Autocomplete Box With Dynamic Suggestions - Awesomecomplete

File Size: 8.6 KB
Views Total: 5274
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Autocomplete Box With Dynamic Suggestions - Awesomecomplete

An awesome jQuery autocomplete plugin for creating an autocomplete box that automatically displays matched suggestions in a dropdown list while typing something into the input field.

More features:

  • Dynamic data rendering.
  • Supports both local and remote data source.
  • Keyboard interactions.
  • Highlights matched suggestions.
  • Data sorting.
  • Cross-browser.
  • And much more.

How to use it:

1. Load the stylesheet awesomecomplete.css for the basic styling of the autocomplete UI.

<link rel="stylesheet" href="awesomecomplete.css" />

2. Create a normal input field on the webpage.

<input type="text" id="friend_id" name="friend[id]" />

3. Place the JavaScript awesomecomplete.js after jQuery library.

<script src="" 
<script src="jquery.awesomecomplete.js"></script>

4. Define the suggestion data and then attach the autocomplete plugin to the input field:

var myData = [
    { name: 'Oscar Filippelli', email: '[email protected]', phone: '(181) 640-7558' },
    { name: 'Kevin Palmer', email: '[email protected]', phone: '(370) 756-3871' },
    { name: 'Kelly Bratton', email: '[email protected]', phone: '(779) 742-2016' }
  staticData: myData

5. To fetch data into the autocomplete, use the dataMethod instead.

  dataMethod: function(term, $this, onDataProxy){
    // Data callback.  If you're using callbacks to a server,
    // call this on the autocompleted text field to complete the
    // callback process after you have your matching items.
    var onDataProxy = function($this, term)
      return function(data)
          processData($this, data, term);

6. More configuration options with default values.


  // active class
  activeItemClass: 'active',

  // attach to
  attachTo: undefined,

  // wrap suggestions
  wrapSuggestions: false,
  // an array of suggestions to ignore
  dontMatch: [],

  // highlight matched suggestions
  highlightMatches: true,

  // higlight class
  highlightClass: 'match',

  // is case sensitive?
  ignoreCase: true,

  // name field
  nameField: 'name',

  // CSS class for no results
  noResultsClass: 'noResults',

  // custom message when no results
  noResultsMessage: undefined,
  // sort function
  sortFunction: defaultSortFunction,

  // split terms
  splitTerm: true,
  // CSS class for suggestion list
  suggestionListClass: "autocomplete",

  // render function
  renderFunction: defaultRenderFunction,

  // maximum number of results
  resultLimit: 10,

  // typing delay
  typingDelay: 0,

  // value function
  valueFunction: defaultValueFunction,

  // delimiter
  wordDelimiter: /[^\da-z]+/ig

7. Available callback functions to handle your data..


  onComplete: function(dataItem) {

  beforeKeyAction: function (activeItem, e) {

  afterKeyAction: function (activeItem, e) {


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