Easy Autocomplete Library For Bootstrap 5 – autocompleteBS

Category: Form , Javascript | April 17, 2021
Author: kanine
Views Total: 441 views
Official Page: Go to website
Last Update: April 17, 2021
License: MIT


Easy Autocomplete Library For Bootstrap 5 – autocompleteBS


A simple and configurable autocomplete JavaScript library created especially for the latest Bootstrap 5 framework.

How to use it:

1. Load the autocompleteBS.css and autocompleteBS.js in your Bootstrap 5 project.

<!-- Bootstrap 5 Framework -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
<!-- autocompleteBS fikes -->
<link rel="stylesheet" href="/path/to/css/autocompleteBS.css" />
<script src="/path/to/js/autocompleteBS.js"></script>

2. Enable the autocomplete functionality on an input field and specify the data source from which the library fetches data for suggestions.

<input type="text" class="form-control" id="inputText" />
  name: 'Select A Country by Name',
  inputSource: document.getElementById('inputText'),
  fetchURL: 'https://restcountries.eu/rest/v2/capital/{term}',
  fetchMap: {
    id: "alpha2Code",
    name: "name"

3. Output the result in another input field.

  inputSource: document.getElementById('inputText'),
  targetID: document.getElementById('anotherInput'),

4. Set the minimum number of characters to trigger the autocomplete.

  minLength: 2

5. Set the maximum number of results displayed in the suggestion list.

  maxResults: 10



  • choose first on enter

You Might Be Interested In:

One thought on “Easy Autocomplete Library For Bootstrap 5 – autocompleteBS

Leave a Reply