UI: Components

AutoSuggest

AutoSuggest is a Web Component, wrapping an input and a <datalist> or <ul>.
It exposes several events, see the console. Try it out by typing the placholder-text.
Documentation in Markdown.

A basic, non-web-component version is also available.
To see alternate color-scheme and text direction examples, see Form.

With list-mode="ul" and nolimit

With list-mode="ul" and custom render-method:

With custom render-method, using nationalize.io:

Advanced, Manual Example

1. In this example, the component is manually mounted, because it has a nomount-attribute.
   Use Autosuggest.mount() to mount it.
2. The noshadow attribute has been removed, so it renders in the shadow DOM.
3. The styles attribute is added. It defaults to index.css in the same folder as the component, but can be any path.
4. Finally, the name-attribute makes the component accessible via the form's elements-collection.

<auto-suggest
  debounce="500"
  name="suggest"
  nomount
  styles>
</auto-suggest>

After making a selection, highlight the parent form in devtools, and in the console, access the control via:$0.elements.suggest

Now you can see both suggest.value and suggest.displayValue

To exclude an autosuggest-control from populating value and displayValue to it's associated form, add a noform-attribute.