Autocomplete/Typeahead Plugin For Bootstrap 4/3

Autocomplete/Typeahead Plugin For Bootstrap 4/3
File Size: 53.1 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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.

How to use it:

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

<!-- Bootstrap JS -->
<script src="" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="" 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",
  "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">
  resolverSettings: {
    url: 'input.json'

  resolver: 'custom',
  events: {
    search: function (qry, callback) {
          data: { 'qry': qry}
      ).done(function (res) {

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

<select class="form-control select" 
        placeholder="Type to search..." 

5. All possible plugin options & callback functions.

  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) {

$('.element').on('', function (evt, item) {

$('.element').on('autocomplete.freevalue', function (evt, value) {

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