input-typeahead

Type: markup & styles & behaviour

Status: ready

Release: 0.3.0

Updated: 2.6.0

Dependencies:

Dependents:

Input field for text with defined answers, that are filtered by user entered text.

UPDATED 2.6.0:: Disabled style. Main typeahead-wrapper gets class .disabled and input gets property disabled
UPDATED 1.7.0:: Removed autocomplete
UPDATED 1.5.0:: New class up to open the option-list to the top, in cases where there is not enough space to fully display it on the bottom.
UPDATED 1.3.1:: Major Overhaul with style, js & markup changes
The new markup of the typeahead:
div.typeahead stays the same
div.typeahead-text-display instead of the span.selected-value
input.typeahead-text-input text input new with class
button.typeahead-toggler toggle arrow new as a button and with new class
div.typeahead-option-container new wrapper for options and action
ul.typeahead-option-list new class instead of .typeahead-items
li.typeahead-option new class instead of .typeahead-item
button.typeahead-action new action element to replace normal list item

More information (accessibility tags etc.) are below in the usage code

UPDATED 0.11.0:: Style changes only;
For .typehead-input-container:hover cursor: pointer;

NOTE:: Updated in Release 0.9.0; New markup for label-part to be able to show selected value with font-styles.; Container with class typeahead-input-container wraps input and new span-element with classselected-value.; {{label-text}} now optional.

NOTE:: Updated in Release 0.4.0; input-typeahead is now a molecule.; ul and li are now used for typeahead-items instead of div.

protected content

only loggeed in users are able to see source-code files and usage of components