Multi Purpose AJAX Autocomplete In Vanilla JavaScript – bautofill

Category: Form , Javascript | September 18, 2019
Views Total:2,002 views
Official Page:Go to website
Last Update:September 18, 2019


Multi Purpose AJAX Autocomplete In Vanilla JavaScript – bautofill


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' 
       data-items = '["Apples","Oranges","Eggplant","Bananas"]' />

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

<input type='text' 
       id='example' />
document.getElementById('example').dataset.items = JSON.stringify(["New York","Michigan","Miami","Arizona","Mississippi"]);

You Might Be Interested In:

Leave a Reply