Bootstrap 5 Autocomplete Plugin With JavaScript

A Bootstrap 5 autocomplete component that adds an autocomplete list to an input field with Bootstrap style.

How to use it:

1. Insert the JavaScript autocomplete.js into your Bootstrap 5 project.

<!-- Bootstrap Stylesheet -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<!-- Bootstrap 5 Autocomplete -->
<script src="/path/to/autocomplete.js"></script>

2. Define an array of suggestions for the autocomplete list.

var country_list = ["Afghanistan","Albania","Algeria", ...];

3. Create the autocomplete list next to your input field.

<input class="form-control" id="form" type="text">
<div class="position-absolute invisible" id="form_complete"></div>

4. Enable the autocomplete list on the input. That’s it.

set_autocomplete('form', 'form_complete', country_list);

5. Specify the number of characters to trigger the autocomplete list. Default: 3.

set_autocomplete('form', 'form_complete', country_list, start_at_letters=2);

6. Specify the number of results that should show in the result list. Default: 5.

set_autocomplete('form', 'form_complete', country_list, start_at_letters=2, count_results=3);

The post Bootstrap 5 Autocomplete Plugin With JavaScript appeared first on CSS Script.