THEMETRIAL

Bootstrap 5 Autocomplete Plugin With JavaScript

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

Preview:

Bootstrap 5 Autocomplete Plugin With JavaScript

Description:

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="https://www.cssscript.com/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);


Source link

Add comment

NOTE :

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

Only share the source www.themetrial.com

Follow us

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