Lightweight Autocomplete / Typehead JavaScript Library – ka-autocomplete

Preview:

Description:

ka-autocomplete is a pure vanilla JavaScript library used toadd autocomplete / typehead functionality to textbox. Enter a character and you will see the list populate with suggestions.

How to use it:

Load the necessary JavaScript and stylesheet in your document.

<link rel="stylesheet" href="css/ka-autocomplete.css">
<script src="js/ka-autocomplete.js"></script>

Create a list of suggestions.

var list = [
    'The Beatles',
    'The Doors',  
    'AC/DC',
    'Led Zeppelin',
    'Pink Floyd',
    'The Rolling Stones',
    'Jefferson Airplane',
    'The Who',
    'Metallica',
    'Lynyrd Skynyrd',
    'Queen',
    'Guns N Roses',
    'Black Sabbath',
    'Aerosmith',
    'Creedence Clearwater Revival',
    'Scorpions',
    'Kiss',
    'Bad Company',
    'Steppenwolf',
    'The Velvet Underground',
    'Bob Dylan',
    'The Kinks',
    'Iron Maiden',
    'The Allman Brothers Band',
    'Deep Purple',
    'The Black Keys',
    'The Clash',
    'Def Leppard',
    'Simon & Garfunkel',
    'Motley Crue'
  ]

Initialize the autocomplete / typehead plugin on target container.

var kaAutocompleteWrapper = document.getElementById('ka-autocomplete');
kaAutocomplete.create(kaAutocompleteWrapper, list);