Author: | bilalbro |
---|---|
Views Total: | 198 views |
Official Page: | Go to website |
Last Update: | December 19, 2022 |
License: | MIT |
Preview:

Description:
A flexible and blazing-fast autocomplete JavaScript library that works with the native input field.
It fetches data from a JS array and provides suggestions in a dropdown list as you type into the text input.
More Features:
- Supports both local and remote data sources.
- Single & Multiple select.
- Keyboard accessibility.
- Data sorting & grouping.
- Highlights matched characters in the results.
- Easy to customize using your own CSS.
How to use it:
1. Import the vanilla-autocompleter.min.js into the document.
<script src="./dist/vanilla-autocompleter.min.js"></script>
2. Add an Autocomplete element next to your input field.
<div class="ac"> <input type="text" class="ac_input" placeholder="Enter a language name"> <div class="ac_suggestions"></div> </div>
3. Define your suggestions in a JS array.
const myData = ['JavaScript', 'Java', 'PHP', 'Rust', 'Ruby', 'Python', 'Swift', 'Scala', 'Kotlin', 'TypeScript'],
4. Initialize the Autocompleter.
new VanillaAutocompleter({ inputElement: document.querySelector('.ac_input'), suggestionsBoxElement: document.querySelector('.ac_suggestions'), data: myData });
5. Apply styles to the suggestion list.
ul { margin: 0; padding: 0; list-style: none; } .ac { display: inline-block; margin-top: 50px; width: 50%; max-width: 400px; position: relative; } .ac_input { display: block; background-color: #f9f9f9; border: 1px solid #ccc; padding: 15px; font-size: 20px; font-family: inherit; width: 100%; box-sizing: border-box; } .ac_suggestions { background-color: #f1f1f1; text-align: left; font-size: 18px; padding: 15px; display: none; color: grey; cursor: pointer; max-height: 150px; overflow-y: auto; overflow-x: hidden; position: absolute; width: 100%; box-sizing: border-box; } .ac_suggestions--shown { display: block; } .ac_suggestions ul { margin: -15px; } .ac_suggestions li { padding: 15px; color: black; } .ac_suggestions li.hl, .ac_suggestions li:hover { background-color: yellow; }
6. More options.
new VanillaAutocompleter({ // highlights matched characters highlight: false, // enables multiselect multiple: false, // shows the selected items showSelected: false, // shows all suggestions when the input is empty allOnEmpty: false, // shows the suggestion list when the input gets focus. showOnFocus: false, // enables keyboard accessibility arrowNav: false, // debounce delay in ms debounceDelay: 0, // functions inputValue: function(suggestion){ // ... }, suggestionHTML: function(suggestion){ // ... }, matchTarget: function(data){ // ... }, isMatch: function(value, data){ // ... }, group: function(suggestion){ // ... }, sort: function(){ // used to sort suggestions }, sortGroup: function(){ // used to sort groups }, });