Lightweight Input Autocomplete with Vanilla JavaScript – Barq

Preview:

Description:

Barq is a lightweight JavaScript library that turns default select list into a text filed that has regex powered autocomplete enabled.

How to use it:

Load the barq.css in the header for basic styles.

<link href="barq.css" rel="stylesheet">

Load the barq.js at the bottom of the document.

<script src="barq.js"></script>

Insert a select list into your document.

<select id="demo">
  <option>Select an airport</option>
  <option value="1">Aalborg, Denmark (AAL)</option>
  <option value="2">Aalesund, Norway (AES)</option>
  <option value="ds" SELECTED>Aarhus, Denmark – Bus service (ZID)</option>
  <option value="4">Aarhus, Denmark – Tirstrup (AAR)</option>
  <option>Aasiaat, Greenland (JEG)</option>
  <option value="">Abadan, Iran (ABD)</option>
  <option value="">Abakan, Russia (ABA)</option>
  <option value="">Aberdeen, United Kingdom (ABZ)</option>
</select>

Enable the autocomplete.

var select = document.querySelector('#demo');
var barq = new Barq(select, {// OPTIONS HERE}).init();

Available options.

enablePagination: false,
removeFirstOptionFromSearch: false,
useFirstOptionTextAsPlaceholder: false,
placeholderText: 'Select an item',
noResultsMessage: 'No itemss for you, pal :(',
onchange: function() {
  alert('You selected the ' + this.text + ' model.');
}