UI Elements
Form controls
Autocomplete

Autocomplete

Autocomplete is a feature in which an application predicts the rest of a word a user is typing.
Basic example - data-*

Basic example via data attributes: (type 'item...') 

<input type="text"
data-provide="typeahead"
data-source='["item 1","item 2","item 3"]'
placeholder="item..."
class="form-control" />
Basic example - javascript

Basic example via javascript (type 'item...') 

<input type="text" placeholder="item..."
class="typeahead_1 form-control" />

$('.typeahead_1').typeahead({
    source: ["item 1","item 2","item 3"]
});
Loading collection

Load collection from json file (type 'Arg...') 

$.get('js/api/typehead_collection.json', function(data){
    $(".typeahead_2").typeahead({ source:data.countries });
},'json');
Loading more complex object

Load json object - required 'name' attribute (type 'Afg...') 

$('.typeahead_3').typeahead({
    source: [
        {"name": "Afghanistan", "code": "AF", "ccn0": "040"},
        {"name": "Land Islands", "code": "AX", "ccn0": "050"},
        {"name": "Albania", "code": "AL","ccn0": "060"},
        {"name": "Algeria", "code": "DZ","ccn0": "070"}
    ]
});