Autocomplete/Typeahead Plugin With Bootstrap 4 Dropdown

A super tiny jQuery/Bootstrap autocomplete plugin which attaches a basic JSON based autocomplete/typeahead functionality to your input field using the Bootstrap 4's Dropdown component.

The Bootstrap 5 Version is available here.

How to use it:

1. Download and import the minified version of the Bootstrap autocomplete plugin into your Bootstrap page.

<!-- Bootstrap Stylesheet -->
<link rel="stylesheet" href="/path/to/bootstrap.min.css" />
<!-- Dependencies -->
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/popper.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<!-- Bootstrap 4 Autocomplete -->
<script src="./dist/bootstrap-4-autocomplete.min.js"></script>

2. Define your suggestions in a JSON/JavaScript object.

var src = {
    "jQuery": 1, 
    "Script": 2, 
    "HTML5": 3, 
    "CSS3": 4, 
    "Angular": 5, 
    "React": 6, 
    "VueJS": 7
}

3. Attach the plugin to the target input field and specify the data source as follows:

<input type="text" id="myAutocomplete"></input>

$('#myAutocomplete').autocomplete({
  source: src
});

4. Specify the minimum number of characters to trigger the autocomplete/typeahead functionality. Default: 4.

$('#myAutocomplete').autocomplete({
  treshold: 1
});

5. Specify the maximum number of entries to show in the dropdown list. Default: 5.

$('#myAutocomplete').autocomplete({
  maximumItems: 3
});

6. Determine whether to highlight the search terms in the result.

$('#myAutocomplete').autocomplete({
  highlightTyped: true,
  highlightClass: 'text-primary'
});

7. Override the default styles of the highlighted characters.

.text-primary {
  /* your styles here */
}

Changelog:

v1.3.2 (2021-01-29)

• v1.3.2

v1.3.0 (2020-11-07)

• maximumItems set to 0 or less, show all

v1.2.1 (2020-01-08)

• Fixed destroying previously set click and keyup events

---

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