Static/Dynamic jQuery Autocomplete & Typeahead Plugin - Aircomplete

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.

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.

  • Publication date: 18.02.2018
  • Source