Fast Autocomplete/Typeahead Library For Bootstrap 5

Preview:

Description:

This is the upgraded version of the Bootstrap 4 Autocomplete plugin that enables a blazing fast autocomplete/typeahead functionality on Bootstrap 5 inputs.

How to use it:

1. Load the main JavaScript autocomplete.js in your Bootstrap 5 project.

<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 suggestions for the autocomplete list.

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

3. Attach the autocomplete list to your input field and done.

<input type="text" id="myAutocomplete" class="form-control" />

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

4. Determine the maximum number of items to display. Default: 5.

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

5. Determine the minimum number of characters typed to trigger the autocomplete list. Default: 2.

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 selected item.

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

8. Customize the names of Lable & Value keys.

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

9. Determine whether to display the value of the entry after the label in the dropdown list. Default: false.

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

10. Determine whether to display the value of the entry before the label in the dropdown list. Default: false.

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

Changelog:

09/21/2021

• added showValueBeforeLabel option

05/20/2021

• Bugfix

05/19/2021

• Fix bug: Navigation with cursor keys does not work

04/07/2021

• set focus to first suggestion by down arrow key

04/06/2021

• render again if data has changed