Smart Autocomplete Component For Bootstrap 5/4

File Size: 45.1 KB
Views Total: 176
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>
  <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
  • labelField: Key for the label
  • valueField: Key for the value
  • 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
  • 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,
    labelField: "label",
    valueField: "value",
    items: [],
    datalist: "",
    server: "",
    serverParams: {},
    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.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.