Flexible Vanilla JavaScript Autocomplete Library

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
    },
});