Customizable Autocomplete Plugin for Bootstrap 5

This is a lightweight autocomplete library that adds intelligent search suggestions to text input fields in Bootstrap 5 projects.

When a user types into a text field, a dropdown list automatically appears, showing matching suggestions for a smoother, faster input experience.

Features:

• Customizable suggestion matching with adjustable character thresholds
• Support for both simple arrays and JSON data sources
• Configurable maximum items displayed in dropdown
• Text highlighting of matched characters
• Custom styling options for dropdowns and highlights
• Callback functions for input changes and item selection
• Keyboard navigation support with arrow keys and escape

How to use it:

1. Make sure you have Bootstrap 5 CSS and JavaScript loaded in your project. Then, include the autocomplete.min.js script after Bootstrap.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.min.js"></script>

<script src="/path/to/autocomplete.min.js"></script>

2. Target the input field where you want autocomplete to function. Use JavaScript to initialize the Autocomplete plugin on this element. You also need to define the data array, which contains the suggestions. Each object in the data array should have a label (the text displayed in the dropdown) and a value (the value submitted when selected).

<input id="demo" class="form-control" Placeholder="JavaScript...">

const elem = document.getElementById("demo");
const autocomplete = new Autocomplete(elem, {
  data: [
    { "label": "Python", "value": "Python" },
    { "label": "JavaScript", "value": "JavaScript" },
    { "label": "Java", "value": "Java" },
    { "label": "C++", "value": "C++" },
    { "label": "C#", "value": "C#" },
    { "label": "C", "value": "C" },
    { "label": "PHP", "value": "PHP" },
    { "label": "Ruby", "value": "Ruby" },
    { "label": "Swift", "value": "Swift" },
    { "label": "Kotlin", "value": "Kotlin" },
    { "label": "Go", "value": "Go" },
    { "label": "Rust", "value": "Rust" },
    { "label": "TypeScript", "value": "TypeScript" },
    { "label": "SQL", "value": "SQL" },
    { "label": "HTML", "value": "HTML" },
    { "label": "CSS", "value": "CSS" }
  ],
});

3. Customize the autocomplete behavior with these configuration options:

• dropdownOptions: Accepts Bootstrap dropdown options for further customization of the dropdown menu. Refer to Bootstrap’s dropdown documentation for available options.
• dropdownClass: Adds custom CSS classes to the dropdown menu element (dropdown-menu). You can pass a string or an array of strings for multiple classes.
• highlightClass: Specifies the CSS class used to highlight the typed text within the suggestions when highlightTyped is enabled. Defaults to text-primary. Accepts a string or an array of strings.
• highlightTyped: A boolean value that determines if the typed text should be highlighted in the suggestions. Defaults to true.
• label: If your data objects use a different key for the suggestion text instead of “label”, specify it here.
• maximumItems: Sets the maximum number of suggestions to display in the dropdown. Defaults to 5. Set to 0 to show all matching suggestions.
• onInput: A callback function that executes every time the user types in the input field. It receives the current input value as an argument.
• onSelectItem: A callback function that triggers when a user selects an item from the dropdown. It receives an object containing the selected label and value.
• showValue: A boolean value. If true, it displays the value of the suggestion alongside the label in the dropdown.
• showValueBeforeLabel: When both showValue and showValueBeforeLabel are true, the value is displayed before the label.
• threshold: Defines the minimum number of characters a user must type before the autocomplete dropdown appears. Defaults to 4.
• value: If your data objects use a different key for the suggestion value instead of “value”, specify it here.

const autocomplete = new Autocomplete(elem, {
  // options and defaults
  data: [],
  threshold: 2,
  maximumItems: 5,
  highlightTyped: true,
  highlightClass: "text-primary",
  label: "label",
  value: "value",
  showValue: false,
  showValueBeforeLabel: false,
  onInput: () => {},
  onSelectItem: ({label, value}) => {},
});

The post Customizable Autocomplete Plugin for Bootstrap 5 appeared first on CSS Script.