Static/Dynamic jQuery Autocomplete & Typeahead Plugin - Aircomplete

Aircomplete is an easy-to-use, AJAX-enabled jQuery Autocomplete & Typeahead plugin which automatically suggests values from the character(s) typed in the input field. Supports both local and external data sources.

Basic usage:

1. Insert jQuery JavaScript library and the jQuery Airecomplete plugin's files into the html file.

<link rel="stylesheet" href="jquery.aircomplete.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="jquery.aircomplete.js"></script>

2. Enabled the Autocomplete & Typeahead functionality on an input field that loads suggestions from local JS objects as follows:

<input type="text" id="basic">

$("#basic").aircomplete({
  data: [
    "Mercury",  "Vulcan",
    "Venus",    "Earth",
    "Mars",     "Counter-Earth",
    "Ceres",    "Jupiter",
    "Saturn",   "Uranus",
    "Neptune",  "Planet X",
    "Pluto",    "Nibiru"
  ],
  onSelect: function(data){
    return data;
  },
  minSearchStringLength : 1 // show results after a single character is entered
});

3. Enabled the Autocomplete & Typeahead functionality on an input field with AJAX and local matching.

<input type="text" id="ajax">

$("#ajax").aircomplete({
  ajaxOptions: {
      url:      'https://swapi.co/api/planets',
      dataType: 'json', // or jsonp
      method:   'GET'
  },
  dataKey: 'results',
  template: function(element, searchTerm) {
      var item = "";

      item += "<div>";
      item += "  " + element.name.replace(new RegExp('(' + searchTerm + ')', 'igm'), "<b>$1</b>");
      item += "</div>";

      return item;
  },
  match: function (dataRow, searchTerm) {
      return dataRow.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
  },
  searchDelay: 500,
  minSearchStringLength : 1 // show results after a single character is entered
});

4. All default plugin settings.

$("Selector").aircomplete({

  // how elements are matched against search text
  // only applies to non-ajax setup
  match: function(dataRow, searchTerm) {

    return dataRow.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;

  },

  // how matches are formatted for the dropdown list
  template: function(dataRow, searchTerm) {
    var html = dataRow;
    var searchTerms = searchTerm.trim().split(" ");
    for (var i = 0; i < searchTerms.length; i++) {
      html = html.replace(new RegExp("(" + searchTerms[i] + ")", "igm"), "<strong>$1</strong>");
    }
    return html;
  },

  // defines what should happen if a user selects an item from the list
  // by default, triggered by both click and enter events
  // the value returned from this function will get set as the val() of the input
  // return false to leave the input val() unchanged
  onSelect: function(dataRow) {
    return dataRow.name;
  },

  // should the list inherit styles from the input?
  inheritStyles: true,

  // minimum size of the search text before we start searching
  minSearchStringLength: 3,

  // maybe data is an object, maybe data is a static file
  data: [], // [] | "/path/to/static/file.json"

  // maybe we need to ajax in results
  ajaxOptions: {
    // url: "http://yoursitehere.com/response.json",
    dataType: "json", // or jsonp
    method  : "GET"
  },

  // given a dataset, what is the path to the array?
  // useful when some APIs return {results: []} or {data: []}
  dataKey: '',

  // how many milliseconds should pass after a keystroke before we 
  // repopulate the list
  searchDelay: 200,

  // should the plugin cache ajax requests?
  cache: true,

  // debug for console output
  debug: false
  
});

---

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