This component defines the standard visual style for the type ahead.
Usage Guidelines
Use this component in situations where the user will be keying in values in order to search for a result.
Features
Dependencies
###Search and Standard Text Input The user’s initial view of the type-ahead functionality will be a search field with the place holder text ‘Search’. Type-ahead can also be implemented within a standard text input field element. The functionality can be communicated through the placeholder text.
Illustrating the two different place holder values.
###Focus and Input Once the user clicks into the field and begins to type characters the response will be a displayed list of suggestions. The response can be buffered if the input can not be kept up with, but a response (results) will be surfaced as soon as resources are available. A user may also back characters out, therefore changing the responses.
###Response and Results The responses that are surfaced to the user are based upon character input, but they can be initially scoped through numerous critieria, dependent upon need and how the componenet is being utilized. (e.g. Geo-location, popularity, etc.)
The results can be displayed in ascending alphabetical order (default) or descending alphabetical order. The user’s typed-in characters will be bolded within the displayed results. Display of results, both vertically (number) as well as horizontally (characer / word length) can be set determined upon available space. But it is recommended that the list of results not be longer than 20 at any given time.
###Selected Values A selected value will be displayed within the field.
List of results.
Selected result.
There may be situations wherein constant values (e.g. Institution lookup) will need to be surfaced to the user no matter what values or characters have been input. These will be displayed at the bottom of the list of results and visually delineated.
Constant values shown below results.
Initial version
Type Ahead