Bootstrap 5 Autocomplete Plugin With JavaScript

Views Total:0 views
Official Page:Go to website
Last Update:June 10, 2021


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="" />
<!-- 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);

Source link

Add comment


All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.