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
Smart Autocomplete Component For Bootstrap 5/4

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:

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>
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" 
       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 (
  • 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();


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.