An ES6 autocomplete for your input using standards Bootstrap 5 (and 4) styles.
No additional CSS needed!
import Autocomplete from "./autocomplete.js";
Autocomplete.init();You can also use options provided by the server. This script expects a json response that is an array or an object with the data key containing an array.
Simply set data-server where your endpoint is located. It should provide an array of value/label objects. 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.
Options can be either passed to the constructor (eg: optionName) or in data-option-name format.
| Name | Type | Description |
|---|---|---|
| showAllSuggestions | Boolean |
Show all suggestions even if they don't match |
| suggestionsThreshold | Number |
Number of chars required to show suggestions |
| maximumItems | Number |
Maximum number of items to display |
| autoselectFirst | Boolean |
Always select the first item |
| updateOnSelect | Boolean |
Update input value on selection (doesn't play nice with autoselectFirst) |
| highlightTyped | Boolean |
Highlight matched part of the label |
| fullWidth | Boolean |
Match the width on the input field |
| labelField | String |
Key for the label |
| valueField | String |
Key for the value |
| queryField | String |
Key for the query parameter for server |
| items | Array | Object |
An array of label/value objects or an object with key/values |
| source | function |
A function that provides the list of items |
| datalist | String |
The id of the source datalist |
| server | String |
Endpoint for data provider |
| serverParams | String | Object |
Parameters to pass along to the server |
| liveServer | Boolean |
Should the endpoint be called each time on input |
| noCache | Boolean |
Prevent caching by appending a timestamp |
| debounceTime | Number |
Debounce time for live server |
| notFoundMessage | String |
Display a no suggestions found message. Leave empty to disable |
| onRenderItem | function |
Callback function that returns the label |
| onSelectItem | function |
Callback function to call on selection |
| onServerResponse | function |
Callback function to process server response |
- 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)
https://codepen.io/lekoalabe/pen/MWXydNQ or see demo.html
Modern browsers (edge, chrome, firefox, safari... not IE11). Add a warning if necessary.
- Bootstrap 5 Tags: tags input for bootstrap
- Admini: the minimalistic bootstrap 5 admin panel