Fast Multilingual Autocomplete Plugin For Bootstrap 5 - Autofill.js
File Size: | 9.39 KB |
---|---|
Views Total: | 4155 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A simple, fast, and customizable jQuery autocomplete & typeahead plugin for the latest Bootstrap 5 framework.
It utilizes Bootstrap's dropdown component to display suggestions while typing something in an input field, which makes the integration with Bootstrap 5 very easy and straightforward.
More Features:
- Keyboard interactions.
- Fuzzy search.
- Multiple languages.
- Supports both local and remote data sources.
- Dark mode is included.
How to use it:
1. Load the required jQuery library and Bootstrap 5 framework.
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
2. Download the plugin and load the autofill.js
script after jQuery.
<script src="./autofill.js"></script>
3. Call the function on the target input field and define an array of suggestions as follows.
<input class="form-control" id="example" />
$("#example").autofill({ values: ["red", "green", "blue"], })
4. You're also allowed to define the suggestions in the data-autofill-values attribute:
<input class="form-control" data-autofill-values="red|green|blue" id="example" />
5. Or load suggestions from a remote data source via AJAX.
$("#example").autofill({ datasetURL: "/path/to/url/", datasetMethod: "GET", datasetPostData: {}, datasetHeaders: {}, datasetFormatting: null, })
6. Determine whether to automatically fill the input field after selection. Default: true.
$("#example").autofill({ autofillSelection: false, })
7. Specify the max number of suggestions to display in the dropdown. Default: 5.
$("#example").autofill({ itemsLimit: 3, })
8. Determine whether to make the dropdown match the input's width. Default: true.
$("#example").autofill({ fullWidth: false, })
9. Enable the Dark Mode. Default: false.
$("#example").autofill({ darkMode: true, })
10. Set the minimum number of characters to trigger the autocomplete. Default: 3.
$("#example").autofill({ minCharacters: 1, })
11. Set the minimum delay before AJAX suggestions are processed. Default: 250.
$("#example").autofill({ minDelay: 200, })
12. Callbacks.
$("#example").autofill({ onLoading: (item) => { console.log(item) }, onSelect: (item) => { console.log(item) alert(`onSelect: ${item.id}`) }, onUpdate: (dropdown) => { console.log(`onUpdate`) console.log(dropdown) }, onEmpty: (dropdown) => { console.log(`onEmpty`) console.log(dropdown) }, onError: (err) => { alert(`onError`) console.error(err) }, })
13. Available event handlers.
$("#example").autofill({ //... }) .on("autofill-loading", (e, item) => { console.log(item) }) .on("autofill-selected", (e, item) => { console.log(item) alert(`autofill-selected: ${item.id}`) }) .on("autofill-update", (e, dropdown) => { console.log(dropdown) }) .on("autofill-empty", (e, dropdown) => { console.log(dropdown) }) .on("autofill-error", (e, err) => { console.error(err) })
14. Localize the plugin.
;(function ($) { $.fn.autofill.lang = { emptyTable: "Sem sugestões...", processing: "Processando...", } })(jQuery)
Changelog:
2022-12-20
- Minor fixes.
- Added debug mode.
2022-08-18
- Added minDelay and minCharacters options.
This awesome jQuery plugin is developed by Gataquadrada. For more Advanced Usages, please check the demo page or visit the official website.