Typeahead

Example

Code

HTML

<fieldset>
    <label class="control-label" for="Text_Input" aria-required="true">Enter a country name:</label>
    <div class="form-group">
        <input id="country" type="text" class="form-control" />
    </div>
    <div>
    </div>
</fieldset>
                

JS

Ajax lookup:

$('#autocomplete').autocomplete({
  serviceUrl: '/autocomplete/countries',
  onSelect: function (suggestion) {
    alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
  }
});
                    

Local lookup (no Ajax):

var countries = [
  { value: 'Andorra', data: 'AD' },
  // ...
  { value: 'Zimbabwe', data: 'ZZ' }
];
$('#autocomplete').autocomplete({
  lookup: countries,
  onSelect: function (suggestion) {
    alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
  }
});                    
                

Documentation

Problem Being Solved

Users need to find a value from a list of content.

When To Use

This pattern can be used when users need to find a single value from a long list. There should be predictable values, such as 'country', for users to narrow down to.

When Not To use

This should not be used for short lists of content, or for lists consisting of unpredictable values.

Formatting

We use Ajax Autocomplete for jQuery by Devbridge for typeahead: https://github.com/devbridge/jQuery-Autocomplete