Lightweight Autocomplete / Typehead JavaScript Library – ka-autocomplete

Category: Form , Javascript | May 21, 2015
Author: ankursatriani
Views Total: 1,209
Official Page: Go to website
Last Update: May 21, 2015
License: MIT

Preview:

Lightweight Autocomplete / Typehead JavaScript Library – ka-autocomplete

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);

You Might Be Interested In:

Leave a Reply