ZuiTypeahead Demo

Zui Typeahead

A rather contrived example, but shows the versatility of the typeahead component

This input doesn't use typeahead but is within the typeahead slot anyway

Click this square instead

Specifically, this example shows you can:

Specify the element to attach to (here '#colors-div', default is first child)
Specify the event on that element to react to (here 'click', default is 'input')
Specify the property on that element to bind the dropdown selection to (here 'className', default is 'value')
Specify the datalist to use, the same way datalist is used natively (here 'colors-list', default is first datalist)
Use a query handler and datalist together to manipulate the datalist options on each event