Description: A type ahead functions as a search filter; it allows the user to view the search results as the user is typing below the input field.

508 Guidelines: A type ahead uses the input field, which will follow the same guidelines as in the form elements section.

TIP: To make the type ahead component work with the screen reader, add the role="application".

Type Ahead
Javascript Code

<div class="form-group" role="application">
    <label for="search-for-provider" class="sr-only">Search</label>
    <input class="form-control typeahead" type="text" name="name" 
    title="The type ahead feature will begin searching for content as you type. 
    The results are listed below, use the up and down arrow keys to review the results." placeholder="Search" id="search-for-provider" />
</div>

Copy

<script src="js/typeahead.js"></script>
<script src="js/bloodhound.js"></script>
<script type="text/javascript">
var options = [
    'option one',
    'option two',
    'option three',
    'option four',
    'option five',
    'option six',
    'option seven',
    'option eight',
    'option nine'
];
$(document).ready(function() {
    // constructs the suggestion engine
    var my_Suggestion_class = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        limit: 4,
        local: $.map(options, function(filtered_items) {
            return {
                value: filtered_items
            };
        })
    });
    my_Suggestion_class.initialize();
    $('.typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 0
    }, {
        name: 'options',
        displayKey: '',
        source: my_Suggestion_class.ttAdapter()
    });
});
</script>

Copy

Type Ahead