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