INSPINIA | Autocomplete

## Autocomplete

##### Autocomplete - Bootstrap Typehead

Autocomplete - typehead
The Typeahead plugin from Twitter's Bootstrap 2 ready to use with Bootstrap 3 and Bootstrap 4. Full documentation can be found: https://github.com/bassjobsen/Bootstrap-3-Typeahead

##### 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" />

##### Loading collection

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

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

##### Basic example - javascript

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

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

##### 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"}
        ]
    });

##### Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-source=""`.

Name | Type | Default | Description
--- | --- | --- | ---
source | array, function | [ ] | The data source to query against. May be an array of strings, an array of JSON object with a name property or a function. The function accepts two arguments, the `query` value in the input field and the `process` callback. The function may be used synchronously by returning the data source directly or asynchronously via the `process` callback's single argument.
items | number | 8 | The max number of items to display in the dropdown. Can also be set to 'all'
minLength | number | 1 | The minimum character length needed before triggering autocomplete suggestions. You can set it to 0 so suggestion are shown even when there is no text when lookup function is called.
showHintOnFocus | boolean | false | If hints should be shown when applicable as soon as the input gets focus.
scrollHeight | number, function | 0 | Number of pixels the scrollable parent container scrolled down (scrolled out the viewport).
matcher | function | case insensitive | The method used to determine if a query matches an item. Accepts a single argument, the `item` against which to test the query. Access the current query with `this.query`. Return a boolean `true` if query is a match.
sorter | function | exact match, case sensitive, case insensitive | Method used to sort autocomplete results. Accepts a single argument `items` and has the scope of the typeahead instance. Reference the current query with `this.query`.
updater | function | returns selected item | The method used to return selected item. Accepts a single argument, the `item` and has the scope of the typeahead instance.
highlighter | function | highlights all default matches | Method used to highlight autocomplete results. Accepts a single argument `item` and has the scope of the typeahead instance. Should return html.
displayText | function | item.name || item | Method used to get textual representation of an item of the sources. Accepts a single argument `item` and has the scope of the typeahead instance. Should return a String.
autoSelect | boolean | true | Allows you to dictate whether or not the first suggestion is selected automatically. Turning autoselect off also means that the input won't clear if nothing is selected and `enter` or `tab` is hit.
afterSelect | function | $.noop() | Call back function to execute after selected an item. It gets the current active item in parameter if any.
delay | integer | 0 | Adds a delay between lookups.
addItem | JSON object | false | Adds an item to the end of the list, for example "New Entry". This could be used, for example, to pop a dialog when an item is not found in the list of data. Example: http://cl.ly/image/2u170I1q1G3A/addItem.png