bootstrap5-autocomplete v1.1.26

Autocomplete for Bootstrap 4/5

How to use

An ES6 autocomplete for your input using standards Bootstrap 5 (and 4) styles.

No additional CSS needed!

import Autocomplete from "./autocomplete.js";
Autocomplete.init();

Server side support

You can also use options provided by the server. This script expects a JSON response with the following structure:

{
    "optionValue1":"optionLabel1",
    "optionValue2":"optionLabel2",
    ...
}

or

[
  {
    "value": "server1",
    "label": "Server 1"
  },
  ...
]

Simply set data-server where your endpoint is located. The suggestions will be populated upon init except if data-live-server is set, in which case, it will be populated on type. A ?query= parameter is passed along with the current value of the searchInput.

Data can be nested in the response under the data key (configurable with serverDataKey).

Options

Options can be either passed to the constructor (eg: optionName) or in data-option-name format.

Callbacks

RenderCallback ⇒ string

ItemCallback ⇒ void

ServerCallback ⇒ Promise

ErrorCallback ⇒ void

Tips

• Use arrow down to show dropdown (and arrow up to hide it)
• If you have a really long list of options, a scrollbar will be used
• Access instance on a given element with Autocomplete.getInstance(myEl)
• Use type="search" for your inputs to get a clear icon

Groups

You can have your items grouped by using the following syntax:

const src = [
  {
    group: "My Group Name",
    items: [
      {
        value: "...",
        label: "...",
      },
    ],
  },
];

Not using Bootstrap ?

This class does NOT depends on Bootstrap JS. If you are not using Bootstrap, you can simply implement the css the way you like it :-)

Demo

https://codepen.io/lekoalabe/pen/MWXydNQ or see demo.html

Custom element

You can now use this as a custom element as part of my Formidable Elements collection.

Browser supports

Modern browsers (edge, chrome, firefox, safari... not IE11). Add a warning if necessary.

Also check out

• Bootstrap 5 Tags: tags input for bootstrap
• BS Companion: the perfect bootstrap companion
• Admini: the minimalistic bootstrap 5 admin panel