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:

• 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.