Press "Enter" to skip to content

[Bootstrap 5] Autocomplete Functionality for Input Fields in Vanilla Javascript

bs5-autocomplete-vanilla Bootstrap is no longer based on jquery is a simple, small but powerful alternative to autocomplete search string in bootstrap-based.

bootstrap autocomplete, typeahead bootstrap 4, jquery autocomplete ajax bootstrap 4, bootstrap 4 autocomplete textbox, typeahead dropdown bootstrap

Advantages:

  • Only a simple matrix with possible outcomes is needed
  • Optional choice after the number of characters entered that the result list is visible / default = 3
  • Optional parameter, when the result is max/default = 5
  • The width and font size of each result refers to the input field / More can be added depending on the style components in the script easily
  • The search string in the results is colored

How to make use of it:

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

<!-- 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 strategies for the autocomplete checklist.

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

3. Create the autocomplete checklist 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 checklist on the input.

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

5. Specify the variety of characters to trigger the autocomplete checklist.

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

6. Specify the variety of results that should present within the outcome checklist.

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

Bootstrap 5 Autocomplete Plugin, bs5-autocomplete-vanillaJS Github, autocomplete jquery bootstrap 4, jquery autocomplete plugin bootstrap


See Demo And Download

Official Website(Denglo): Click Here

This superior jQuery/javascript plugin is developed by Denglo. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *