Multi Purpose AJAX Autocomplete In jQuery - bautofill

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.

How to use it:

1. Load jQuery JavaScript library and the bautofill plugin in the HTML document.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="bautofill.js"></script>

2. To initialize the plugin, add the CSS class 'bautoCompleteInput' to your text box...

<input type="text" class="bautoCompleteInput">

3. And then specify the data source in the HTML or JSON array as follows:

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

// or
document.getElementById('dataInVariable').dataset['filler'] = '["New York","Wisconsin","Nevada","Arizona","Mississippi"]';

4. Apply your own styles to the suggestion dropdown.

.bautoCompleteList {
  list-style:none;
  padding:0;
  margin:0px;
  position:absolute;
  z-index:1;
  visibility:hidden;
  border:1px inset gray;
  background:white;
}

.bautoCompleteItem { 
  margin:0px; 
  cursor:pointer;  
}

.bautoCompleteItem:hover { 
  background: ghostwhite; 
}

Changelog:

2019-03-05

• Added trivial error handling and changed focusout to blur.

---

This awesome jQuery plugin is developed by benergize. For more Advanced Usages, please check the demo page or visit the official website.