Press "Enter" to skip to content

Autocomplete/Typeahead JS Plugin For Bootstrap v5

bootstrap-5-autocomplete is an upgraded version of the Bootstrap 4 Autocomplete plugin that enables fast autocomplete/write functionality on Bootstrap 5 inputs.

bootstrap 4 typeahead dropdown, jquery autocomplete vs typeahead, bootstrap 4 autocomplete, bootstrap typeahead multiple select example, bootstrap autocomplete

How to make use of it:

1. Load the principle JavaScript autocomplete.js in your Bootstrap 5 mission.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
<script src="/path/to/autocomplete.js"></script>

2. Define an array of options for the autocomplete checklist.

var datasrc = [
    {label: 'Option 1', value: 'opt1'},
    {label: 'Option 2', value: 'opt2'},
    {label: 'Option 3', value: 'opt3'},
    // ...
]

3. Attach the autocomplete listing to your input subject and executed it.

<input type="text" id="myAutocomplete" class="form-control" />
const ac = new Autocomplete(document.getElementById('myAutocomplete'), {
      data: datasrc
});

4. Determine the maximum variety of objects to show.

const ac = new Autocomplete(document.getElementById('myAutocomplete'), {
      maximumItems: 10
});

5. Determine the minimal variety of characters typed to set off the autocomplete checklist.

const ac = new Autocomplete(document.getElementById('myAutocomplete'), {
      treshold: 1
});

6. Customize the styles of the highlighted characters.

const ac = new Autocomplete(document.getElementById('myAutocomplete'), {
      highlightTyped: true,
      highlightClass: 'text-primary'
});

7. Get the chosen item.

const ac = new Autocomplete(document.getElementById('myAutocomplete'), {
      onSelectItem: ({label, value}) => {
        console.log("user selected:", label, value);
      }
});

Fast Autocomplete/Typeahead Library, bootstrap-5-autocomplete Plugin/Github, typeahead js cdn, bootstrap autocomplete with ajax, how to use typeahead in jquery


See Demo And Download

Official Website(gch1p): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published.