Fast Multilingual Autocomplete Plugin For Bootstrap 5 - Autofill.js

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.