Author: | gch1p |
---|---|
Views Total: | 150 views |
Official Page: | Go to website |
Last Update: | April 7, 2021 |
License: | MIT |
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); } });
Changelog:
04/07/2021
- set focus to first suggestion by down arrow key
04/06/2021
- render again if data has changed
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”,
I want to pass in the url, what should I do?thanhs