Minimalist Autocomplete Plugin For Bootstrap 4

An ultra-light and blazing fast autocomplete plugin for Bootstrap 4 framework. Written in Vanilla JavaScript. jQuery and Bootstrap JS are OPTIONAL.

How to use it:

1. Add the main script index.js to your web page with at least Bootstrap's stylesheet loaded.

1<!-- Required -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/src/index.js"></script>
<!-- Optional -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2. Define an array of suggestions for the autocomplete list, which will open as you type something in the input field.

const countries = [
      "Afghanistan",
      "Åland Islands",
      "Albania",
      "Algeria",
      "American Samoa",
      "Andorra",
      "Angola",
      "Anguilla",
      "Antarctica",
      "Antigua and Barbuda",
      "Argentina",
      "Armenia",
      "Aruba",
      "Australia",
      "Austria",
      "Azerbaijan",
      "Bahamas (the)",
      "Bahrain",
      "Bangladesh",
      "Barbados",
      "Belarus",
      "Belgium",
      "Belize",
      "Benin",
      "Bermuda",
      "Bhutan",
      "Bolivia (Plurinational State of)",
      "Bonaire, Sint Eustatius and Saba",
      "Bosnia and Herzegovina",
]

3. Apply the autocomplete functionality to your input field and pass the suggestion array as the second parameter to the autocomplete function. That's it.

<input id="search" type="text" placeholder="Search countries..." class="form-control" />

var search = document.getElementById('search');
autocomplete(search, countries);

---

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