Lion Logo Lion Guides Components Docs Blog Toggle darkmode

Combobox: Examples

Below several extensions can be found. They illustrate that complex UI components can be created easily from an extended Lion component, just by:

  • configuring: setting properties or providing conditions via methods
  • enhancing: adding extra html/styles/logic without changing behavior of the extended element
  • overriding: replace html/styles/logic of the extended element with your own

Material Design

Github

Whatsapp

Whatsapp example shows:

  • advanced styling
  • how to match/highlight text on multiple rows of the option (not just choiceValue)
  • how to animate options

Google Search example shows:

  • advanced styling
  • how to use options that are links
  • create exact user experience of Google Search, by:
    • using autocomplete 'list' as a fundament (we don't want inline completion in textbox)
    • enhancing _showOverlayCondition: open on focus
    • enhancing _syncToTextboxCondition: always sync to textbox when navigating by keyboard (this needs to be enabled, since it's not provided in the "autocomplete=list" preset)