Easy Autocomplete Library For Bootstrap 5 – autocompleteBS

Category: Form , Javascript | August 5, 2022
Author:kanine
Views Total:2,242 views
Official Page:Go to website
Last Update:August 5, 2022
License:MIT

Preview:

Easy Autocomplete Library For Bootstrap 5 – autocompleteBS

Description:

A simple and configurable autocomplete JavaScript library created especially for the latest Bootstrap 5 framework.

How to use it:

1. Load the autocompleteBS.css and autocompleteBS.js in your Bootstrap 5 project.

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

2. Enable the autocomplete functionality on an input field and specify the data source from which the library fetches data for suggestions.

<input type="text" class="form-control" id="inputText" />
autocompleteBS({
  name: 'Select A Country by Name',
  inputSource: document.getElementById('inputText'),
  fetchURL: 'https://restcountries.eu/rest/v2/capital/{term}',
  fetchMap: {
    id: "alpha2Code",
    name: "name"
  }
});

3. Output the result in another input field.

autocompleteBS({
  inputSource: document.getElementById('inputText'),
  targetID: document.getElementById('anotherInput'),
});

4. Set the minimum number of characters to trigger the autocomplete.

autocompleteBS({
  minLength: 2
});

5. Set the maximum number of results displayed in the suggestion list.

autocompleteBS({
  maxResults: 10
});

Changelog:

08/05/2021

  • select parent element when target is not a div

04/17/2021

  • choose first on enter

You Might Be Interested In:


One thought on “Easy Autocomplete Library For Bootstrap 5 – autocompleteBS

Leave a Reply