60 lines
1.8 KiB
Markdown
60 lines
1.8 KiB
Markdown
# bootstrap-5-autocomplete
|
|
|
|
This is a rewrite of https://github.com/Honatas/bootstrap-4-autocomplete for bootstrap v5.
|
|
|
|
### Example
|
|
|
|
```js
|
|
const ac = new Autocomplete(field, {
|
|
data: [{label: "I'm a label", value: 42}],
|
|
maximumItems: 5,
|
|
onSelectItem: ({label, value}) => {
|
|
console.log("user selected:", label, value);
|
|
}
|
|
});
|
|
|
|
// later, when you need to change the dataset
|
|
|
|
ac.setData([
|
|
{label: 'New York JFK', value: 'JFK'},
|
|
{label: 'Moscow SVO', value: 'SVO'},
|
|
]);
|
|
```
|
|
|
|
### Options
|
|
|
|
Options is a JSON object with the following attributes (in alphabetical order):
|
|
|
|
**data**:
|
|
The data from where autocomplete will lookup items to show. This data has to be an array of JSON objects. The format for every item in the array is:
|
|
|
|
{"label": "This is a text", "value": 42}
|
|
|
|
**dropdownOptions**:
|
|
It's the same options from Bootstrap's Dropdown, documented [here](https://getbootstrap.com/docs/5.0/components/dropdowns/#options).
|
|
|
|
**dropdownClass**:
|
|
The class of the dropdown-menu element, which is the box that is displayed. Can take a string or an array of strings.
|
|
|
|
**highlightClass**:
|
|
The class to use when highlighting typed text on items. Only used when highlightTyped is true. Default is text-primary. Can take a string or an array of strings.
|
|
|
|
**highlightTyped**:
|
|
Wether to highlight (style) typed text on items. Default is true.
|
|
|
|
**maximumItems**:
|
|
How many items you want to show when the autocomplete is displayed. Default is 5. Set to 0 to display all available items.
|
|
|
|
**onInput**
|
|
|
|
**onSelectItem**:
|
|
A callback that is fired every time an item is selected. It receives an object in following format:
|
|
|
|
{label: <label>, value: <value>}
|
|
|
|
**treshold**:
|
|
The number of characters that need to be typed on the input in order to trigger the autocomplete. Default is 4.
|
|
|
|
### License
|
|
|
|
MIT |