Sensible Autocomplete Element For Bootstrap 5/4

A light-weight and easy-to-use autocomplete part for Bootstrap 5 and Bootstrap 4 frameworks. It was written in ES 6 and is100% compliant with Twitter Bootstrap markup, types, and API.

See Additionally:

Easy methods to use it:

1. Load the required Bootstrap framework within the doc.

<!-- Required For Bootstrap 4 -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>

<!-- Bootstrap 5 or 4 Framework -->
<hyperlink rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

2. Import the autocomplete part.

import Autocomplete from "./autocomplete.min.js";

3. Initialize the plugin on the goal enter discipline and specify an array of options for the autocomplete record.

<enter kind="textual content" class="form-control autocomplete" id="autocompleteInput" placeholder="Sort one thing" />

Autocomplete.init("enter.autocomplete", {
  objects: [
    {
      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",
});

// It additionally helps teams
[
  {
    group: "My Group Name",
    items: [
      {
        value: "...",
        label: "...",
      },
    ],
  },
];

4. It additionally works with the datalist.

<enter kind="textual content" class="form-control" id="autocompleteDatalist" data-datalist="list-timezone" placeholder="Sort one thing" />
<datalist id="list-timezone">
  <choice worth="asia_aden">Asia/Aden</choice>
  <choice>Asia/Aqtau</choice>
  <choice>Asia/Baghdad</choice>
  <choice>Asia/Barnaul</choice>
  <choice>Asia/Chita</choice>
  <choice>Asia/Dhaka</choice>
  <choice>Asia/Famagusta</choice>
  <choice>Asia/Hong_Kong</choice>
  <choice>Asia/Jayapura</choice>
  <choice>Asia/Kuala_Lumpur</choice>
  <choice>Asia/Jakarta</choice>
</datalist>

new Autocomplete(doc.getElementById("autocompleteDatalist"), {
    // choices
});

5. Or load choices from a distant information supply.

<enter kind="textual content" class="form-control" id="autocompleteRemote" data-server="demo.json" placeholder="Sort one thing" />

<!-- OR -->
<enter kind="textual content" class="form-control" id="autocompleteRemote" 
       data-server="/path/to/information/"
       data-live-server="true" 
       data-value-field="id"
       data-label-field="title"
       data-server-params="{"associated":"related_field"}" 
       placeholder="Sort one thing" />

new Autocomplete(doc.getElementById("autocompleteRemote"), {
    // choices
});

6. Obtainable choices.

• showAllSuggestions: Present all options even when they do not match
• suggestionsThreshold: Variety of chars required to point out options
• maximumItems: Most variety of objects to show
• autoselectFirst: All the time choose the primary merchandise
• ignoreEnter: Ignore enter if no objects are chosen
• updateOnSelect: Replace enter worth on choice
• highlightTyped: Spotlight matched a part of the label
• highlightClass: Class added to the mark label
• fullWidth: Match the width on the enter discipline
• fastened: Use fastened positioning
• fuzz: Allow fuzz search
• fillIn: Present fill in icon.
• startsWith: Should begin with the string
• preventBrowserAutocomplete: Stop the native browser autocomplete
• itemClass: Utilized to the dropdown merchandise
• fullWidth: Match the width on the enter discipline
• labelField: Key for the label
• valueField: Key for the worth
• queryField: Key for the question parameter for server
• searchFields:  Array Key for the search
• objects: An array of label/worth objects or an object with key/values
• hiddenInput: Create an hidden enter which shops the valueField
• hiddenValue: Populate the preliminary hidden worth. Principally helpful with liveServer
• clearControl: Selector that may clear the enter on click on
• datalist: The id of the supply datalist
• supply: A operate that gives the record of things
• server: Endpoint for information supplier
• serverParams: Parameters to cross alongside to the server
• fetchOptions: Another fetch choices (https://developer.mozilla.org/en-US/docs/Internet/API/fetch#syntax)
• liveServer: Ought to the endpoint be referred to as every time on enter
• noCache: Stop caching by appending a timestamp
• debounceTime: Debounce time for reside server
• notFoundMessage: Show a no options discovered message. Depart empty to disable

new Autocomplete(doc.getElementById("autocompleteRemote"), {
    showAllSuggestions: false,
    suggestionsThreshold: 2,
    maximumItems: 0,
    autoselectFirst: true,
    ignoreEnter: false,
    tabSelect: true,
    updateOnSelect: false,
    highlightTyped: false,
    highlightClass: '',
    fullWidth: false,
    fastened: false,
    fuzzy: false,
    fillIn: false,
    startsWith: false,
    fillIn: true,
    preventBrowserAutocomplete: true,
    itemClass: "",
    activeClasses: ["bg-primary", "text-white"],
    labelField: "label",
    valueField: "worth",
    searchFields: ["label"],
    queryParam: "question",
    objects: [],
    supply: null,
    hiddenInput: false,
    hiddenValue: "",
    clearControl: "",
    datalist: "",
    server: "",
    serverMethod: "GET",
    serverParams: {},
    serverDataKey: "information",
    fetchOptions: {},
    liveServer: false,
    noCache: true,
    debounceTime: 300,
    notFoundMessage: "",
});

7. Callback features.

new Autocomplete(doc.getElementById("autocompleteRemote"), {

    // Callback operate that returns the label
    onRenderItem: (merchandise, label, inst) => {
      return label;
    },

    // Callback operate to name on choice
    onSelectItem: (merchandise, inst) => {},

    // Callback operate to course of server response
    onServerResponse: (response, inst) => {
      return response.json();
    },

    onServerError: (e, sign, inst) => {
      // Present model of Firefox rejects the promise with a DOMException
      if (e.title === "AbortError" || sign.aborted) {
        return;
      }
      console.error(e);
    },

    // Callback operate to name on change-event. Returns at the moment chosen merchandise if any
    onChange: (merchandise, inst) => {},

    // Callback operate earlier than fetch
    onBeforeFetch: (inst) => {},

    // Callback operate after fetch
    onAfterFetch: (inst) => {},
    
});

Changelog:

v1.1.38 (2025-03-13)

• Present all options shouldn’t forestall autoselect

v1.1.37 (2025-03-04)

• Additional Enhance TypeScript Definitions
• Make _ShowSuggestions work in internet elements

v1.1.36 (2025-02-12)

v1.1.35 (2025-01-11)

• enable params.associated to be an array of kind discipline IDs

v1.1.34 (2024-12-05)

• feat: onBeforeFetch() must be referred to as earlier

v1.1.33 (2024-10-16)

• Repair energetic courses not being set correctly

v1.1.32 (2024-10-08)

• Preserve pure order when utilizing numerical indexes

v1.1.31 (2024-09-13)

v1.1.29 (2024-08-19)

• Repair clicking on scroll in a modal

v1.1.28 (2024-07-03)

• do not choose the choice with the mouse until you might be truly utilizing it

v1.1.27 (2024-06-19)

• repair blur + clicking on scroll in a modal

v1.1.26 (2024-04-16)

• Add onServerError callback

v1.1.25 (2023-12-01)

v1.1.24 (2023-11-29)

v1.1.23 (2023-10-28)

• Repair spotlight for labels which doesn’t incorporates lookup

v1.1.21 (2023-09-14)

• Transfer class to dropdown merchandise

v1.1.20 (2023-07-24)

• Added itemClass choice
• Added preventBrowserAutocomplete choice

v1.1.19 (2023-07-20)

• Change again to autocomplete=off
• Tweak ignoreEnter in order that it might probably nonetheless add values if one thing is chosen

v1.1.17 (2023-07-18)

v1.1.16 (2023-07-03)

• Stop handleEvent to be rebound
• Add dynamic params

v1.1.15 (2023-07-01)

• add choice for change-event

v1.1.14 (2023-06-13)

• Repair firefox accessibility attributes

v1.1.13 (2023-06-09)

v1.1.11 (2023-06-08)

v1.1.10 (2023-06-08)

• Add serverDataKey param
• Fastened subject with numbers as keys
• Additionally use title for associated param

v1.1.9 (2023-05-17)

v1.1.8 (2023-05-15)

• Repair some edge case with labels

v1.1.7 (2023-05-11)

• Enhance hidden enter default worth (might be discovered mechanically or set utilizing hidden-value)

v1.1.6 (2023-05-09)

• Help hidden enter worth

v1.1.5 (2023-04-22)

• Replace autocomplete.js
• Enhance callbacks (cross occasion)

v1.1.4 (2023-03-07)

v1.1.3 (2023-03-02)

• Enhance scroll dealing with in menu
• RTL assist improved
• Positioning improved
• Repair arrow down not displaying the menu

v1.1.2 (2023-03-01)

• repair message not discovered not being displayed
• configurable energetic courses

v1.1.1 (2023-01-16)

v1.1 (2023-01-13)

• Enhance positioning in a number of eventualities
• Renamed queryField to queryParam to be extra constant

v1.0.4 (2023-01-02)

v1.0.3 (2022-11-22)

v1.0.2 (2022-11-14)

• Add supply choice
• Repair setData for server

This superior jQuery plugin is developed by lekoala. For extra Superior Usages, please test the demo web page or go to the official web site.