Multi Purpose AJAX Autocomplete In Vanilla JavaScript – bautofill

Preview:

Description:

bautofill is a multi-purpose autocomplete library for text box, written in pure JavaScript.

The library displays a drop-down list containing suggestions depending on the user input.

The autocomplete data is populated from JSON arrays of strings or provided directly in the HTML. You can of course populate the dropdown list using AJAX.

How to use it:

Import the bautofill’s JavaScript and Stylesheet in the document.

<link rel='stylesheet' href='bautofill.css' />
<script src='bautofill.js'></script>

Add the bautofill class to the input field and define the suggestions in the data-items attribute:

<input type='text' 
       class='bautofill' 
       data-items = '["Apples","Oranges","Eggplant","Bananas"]' />

You can also initialize the library & fetch data using JavaScript.

<input type='text' 
       class='bautofill' 
       id='example' />

document.getElementById('example').dataset.items = JSON.stringify(["New York","Michigan","Miami","Arizona","Mississippi"]);