Fast Autocomplete/Typeahead Library For Bootstrap 5

Category: Form , Javascript | January 5, 2022
12 Comments
Demo Download
Author:gch1p
Views Total:5,671 views
Official Page:Go to website
Last Update:January 5, 2022
License:MIT

Preview:

Fast Autocomplete/Typeahead Library For Bootstrap 5

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:

01/05/2022

  • fix for accented characters

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

See Also:

You Might Be Interested In:

12 thoughts on “Fast Autocomplete/Typeahead Library For Bootstrap 5”

  1. David Quintana

    Hi! Thank you very much for share you code. Beautiful solution. Only one thing, there is an error in line 99. The code “value: e.target.value” must be “value: e.target.dataset.value”,

    Reply ↓
  5. Chris

    Can you adapt this to query an external source? So we can refresh the list of suggestion as the user types the text?

    Reply ↓
  7. Kiasta

    Love this, made a few modifications to fit my needs, but this is such a better and cleaner solution than twitter’s typeahead and jQautocomplete.

    Reply ↓
  9. Udara Madushan

    Hi After so many web research I found your solution. I placed your codes on my my code snippet which gave lots of pain when try to implement the auto complete thing.

    It nicely worked than I expected with your code.

    But I need to fetch the data from the PHP script instead of using and JSON array.
    This is I used it earlier with JQuery;
    $(‘#complaints’).autocomplete({
    source: ‘./php_ajax/get_complaints_hint.php’,
    minLength: 1,
    multiple: true
    });

    How should I change your code;
    const field = document.getElementById(‘input’);
    const ac = new Autocomplete(field, {
    data: [{
    label: “I’m a label”,
    value: 42
    }],
    maximumItems: 5,
    threshold: 1,
    onSelectItem: ({
    label,
    value
    }) => {
    console.log(“user selected:”, label, value);
    }
    });

    to get done the same. I know this will be a little thing for you but mow I am fed up by this and nothing comes into my mind

    Thanks

    Reply ↓
  10. Bugger

    Bug:
    When you try to select an autocomplete item by clicking or tapping on the highlighted part of the item, it doesn’t work because in this case the event target won’t be the item, but the item’s span child element…

    Reply ↓

Leave a Reply