Autocomplete/Typeahead Plugin For Bootstrap 4/3

An easy-to-use and AJAX-enabled autocomplete/typeahead jQuery plugin that works with input and select elements and is compatible with Bootstrap 4 and Bootstrap 3 frameworks.

1. Download and include the main JavaScript bootstrap-autocomplete.js on the Bootstrap webpage.

<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Bootstrap Autocomplete -->
<script src="bootstrap-autocomplete.js"></script>

2. Prepare your data for the autosuggest list: (list of strings, complex object with custom format, etc).

// input.json
[
  "Google Cloud Platform",
  "Amazon AWS",
  "Docker",
  "Digital Ocean"
]
// input-object.json
{
  "results": [
    { 
      "id": 1, 
      "text": "Google Cloud Platform",
      "icon": "gcp.jpg"
    },
    { 
      "id": 2, 
      "text": "Amazon AWS",  
      "icon": "aws.jpg"
    },
    { 
      "id": 3, 
      "text": "Docker",
      "icon": "docker.png"
    }
  ]
}
// list.json
[
  { "value": 1, "text": "Google Cloud Platform" },
  { "value": 2, "text": "Amazon AWS" },
  { "value": 3, "text": "Docker" }
]

3. Attach the Bootstrap Autocomplete to an input field and specify the data source as follows:

<input class="form-control basic" type="text" autocomplete="off">
<input class="form-control complex" type="text" autocomplete="off">

$('.basic').autoComplete({
  resolverSettings: {
    url: 'input.json'
  }
});
$('.complex').autoComplete({
  resolver: 'custom',
  events: {
    search: function (qry, callback) {
      $.ajax(
        'input-object.json',
        {
          data: { 'qry': qry}
        }
      ).done(function (res) {
        callback(res.results)
      });
    }
  }
});

4. Attach the Bootstrap Autocomplete to a select element and specify the data source as follows:

<select class="form-control select" 
        name="simple_select" 
        placeholder="Type to search..." 
        data-url="list.json" 
        autocomplete="off">
</select>

$('.select').autoComplete();

5. All possible plugin options & callback functions.

$('.select').autoComplete({
  resolver: 'ajax',
  resolverSettings: {},
  minLength: 3,
  valueKey: 'value',
  formatResult: null,
  autoSelect: true,
  noResultsText: 'No results',
  events: {
    typed: null,
    searchPre: null,
    search: null,
    searchPost: null,
    select: null,
    focus: null,
  }
});

6. Event handlers.

$('.element').on('change', function (e) {
  console.log('change');
});
$('.element').on('autocomplete.select', function (evt, item) {
 console.log('item');
});
$('.element').on('autocomplete.freevalue', function (evt, value) {
  console.log('value');
});

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