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="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<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' }
    ...
];

$('#friend_id').awesomecomplete({
  staticData: myData
});

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

$('#friend_id').awesomecomplete({
  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.

$('#friend_id').awesomecomplete({

  // 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..

$('#friend_id').awesomecomplete({

  onComplete: function(dataItem) {
    console.log(dataItem);
  },

  beforeKeyAction: function (activeItem, e) {
    console.log(activeItem);
  }

  afterKeyAction: function (activeItem, e) {
    console.log(e.target);
  }

});

---

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