We're using cookies, but you can turn them off in your browser settings. Otherwise, you are agreeing to our use of cookies. Learn more in our Privacy Policy.

Typeahead

Typeahead Example

This example uses the local lookup (no Ajax) format seen in the code example section.

HTML

<fieldset>
    <legend>Legend Goes Here>/legend<

    <div class="form-group">
        <label for="inputId" class="control-label" >Your Label Goes Here</label>
        <input id="inputId" type="text" class="form-control" />
    </div>
</fieldset>
            

JavaScript

Ajax lookup:

$('#yourInputId').autocomplete({
  serviceUrl: 'yourURLPathGoesHere',
  onSelect: function (suggestion) {
    **do something with the data**
    **example: alert('You selected: ' + suggestion.value + ', ' + suggestion.data);**
  }
});
            

Local lookup (no Ajax):

let demoData = [
  { value: 'Andorra', data: 'AD' },
  // ...
  { value: 'Zimbabwe', data: 'ZZ' }
];
$('#yourInputId2').autocomplete({
  lookup: demoData,
  onSelect: function (suggestion) {
     **do something with the data**
    **example: alert('You selected: ' + suggestion.value + ', ' + suggestion.data);**
  }
});
            

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