Smart Autocomplete Component For Bootstrap 5/4
File Size: | 49.6 KB |
---|---|
Views Total: | 1070 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A lightweight and easy-to-use autocomplete component for Bootstrap 5 and Bootstrap 4 frameworks. It was written in ES 6 and is100% compliant with Twitter Bootstrap markup, styles, and API.
See Also:
- 10 Best Autocomplete & Typeahead JavaScript Plugins
- 10 Best JavaScript & CSS Components For Bootstrap 5
How to use it:
1. Load the necessary Bootstrap framework in the document.
<!-- Required For Bootstrap 4 --> <script src="/path/to/cdn/jquery.slim.min.js"></script> <!-- Bootstrap 5 or 4 Framework --> <link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
2. Import the autocomplete component.
import Autocomplete from "./autocomplete.min.js";
3. Initialize the plugin on the target input field and specify an array of suggestions for the autocomplete list.
<input type="text" class="form-control autocomplete" id="autocompleteInput" placeholder="Type something" />
Autocomplete.init("input.autocomplete", { items: [ { id: 'opt1', label: 'Option 1', value: 'opt1', title: 'Option 1', data: { key: 1 }, }, { id: 'opt2', label: 'Option 2', value: 'opt1', title: 'Option 2', data: { key: 2 }, } ], valueField: "id", labelField: "title", });
4. It also works with the datalist
.
<input type="text" class="form-control" id="autocompleteDatalist" data-datalist="list-timezone" placeholder="Type something" /> <datalist id="list-timezone"> <option value="asia_aden">Asia/Aden</option> <option>Asia/Aqtau</option> <option>Asia/Baghdad</option> <option>Asia/Barnaul</option> <option>Asia/Chita</option> <option>Asia/Dhaka</option> <option>Asia/Famagusta</option> <option>Asia/Hong_Kong</option> <option>Asia/Jayapura</option> <option>Asia/Kuala_Lumpur</option> <option>Asia/Jakarta</option> </datalist>
new Autocomplete(document.getElementById("autocompleteDatalist"), { // options });
5. Or load options from a remote data source.
<input type="text" class="form-control" id="autocompleteRemote" data-server="demo.json" placeholder="Type something" /> <!-- OR --> <input type="text" class="form-control" id="autocompleteRemote" data-server="/path/to/data/" data-live-server="true" data-value-field="id" data-label-field="name" data-server-params='{"related":"related_field"}' placeholder="Type something" />
new Autocomplete(document.getElementById("autocompleteRemote"), { // options });
6. Available options.
- suggestionsThreshold: Number of chars required to show suggestions
- maximumItems: Maximum number of items to display
- autoselectFirst: Always select the first item
- highlightTyped: Highlight matched part of the label
- fullWidth: Match the width on the input field
- fixed: Use fixed positioning
- labelField: Key for the label
- valueField: Key for the value
- queryField: Key for the query parameter for server
- items: An array of label/value objects or an object with key/values
- datalist: The id of the source datalist
- source: A function that provides the list of items
- server: Endpoint for data provider
- serverParams: Parameters to pass along to the server
- fetchOptions: Any other fetch options (https://developer.mozilla.org/en-US/docs/Web/API/fetch#syntax)
- liveServer: Should the endpoint be called each time on input
- noCache: Prevent caching by appending a timestamp
- debounceTime: Debounce time for live server
new Autocomplete(document.getElementById("autocompleteRemote"), { suggestionsThreshold: 2, maximumItems: 0, autoselectFirst: true, highlightTyped: false, fullWidth: false, fixed: false, activeClasses: ["bg-primary", "text-white"], labelField: "label", valueField: "value", queryParam: "query", items: [], datalist: "", server: "", serverParams: {}, fetchOptions: {}, liveServer: false, noCache: true, debounceTime: 300, souce: function(){}, });
7. Callback functions.
new Autocomplete(document.getElementById("autocompleteRemote"), { // Callback function that returns the label onRenderItem: (item, label) => { return label; }, // Callback function to call on selection onSelectItem: (item) => {}, // Callback function to process server response onServerResponse: (response) => { return response.json(); }, });
Changelog:
v1.1.4 (2023-03-07)
- Add fetch options
v1.1.3 (2023-03-02)
- Improve scroll handling in menu
- RTL support improved
- Positioning improved
- Fix arrow down not showing the menu
v1.1.2 (2023-03-01)
- fix message not found not being displayed
- configurable active classes
v1.1.1 (2023-01-16)
- Add fixed positioning
v1.1 (2023-01-13)
- Improve positioning in multiple scenarios
- Renamed queryField to queryParam to be more consistent
v1.0.4 (2023-01-02)
- Add queryField param
v1.0.3 (2022-11-22)
- Minor tweaks
v1.0.2 (2022-11-14)
- Add source option
- Fix setData for server
This awesome jQuery plugin is developed by lekoala. For more Advanced Usages, please check the demo page or visit the official website.