Easy to use Javascript autocomplete/autofill library for input fields

Today I am going to share a very easy to use Javascript autocomplete/autofill library for input fields .bautofill is a multi-purpose autocomplete library for text box, written in jQuery.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.


Libraries

Include following libraries on page.

<link rel = 'stylesheet' href = 'bautofill.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = 'bautofill.js'></script>

HTML

To call the plugin on specific input box, just add the CSS class ‘bautoCompleteInput’ and pass all the data on data-filter attribute in array form.

<input type = 'text' class = 'bautoCompleteInput' data-filler='["Apples","Oranges","Eggplant","Bananas"]'>



JS

OR you can pass the filter data form javascript.

 <input type = 'text' class = 'bautoCompleteInput' id = 'dataInVariable' data-filler=''> 	
		<script>document.getElementById('dataInVariable').dataset['filler'] = '["New York","Michigan","Miami","Arizona","Mississippi"]';</script>

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by benergize. Visit their official github repository for more information and follow for future updates.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.