Search Bar

The lens-searchbar component offers an interface for exploring of all catalogue items. It serves as the primary interface for users to search, apply, and adjust query criteria. Selected items appear as interactive chips within the component, giving users a clear visual of their active filters. Users can easily refine their search by removing individual values or entire criteria directly from the chip display.

Behavior & Functionality

• Search Input with Autocomplete:

  • Opens dropdown after 3+ characters.
  • Filters and displays grouped suggestions with optional counts and descriptions.
  • Keyboard navigation support (focusedItemIndex).

• Search Chips:

  • Displays selected criteria as removable chips.
  • Nested value-level and item-level delete buttons.
  • Each chip displays:
    • Criterion name
    • Values
    • Optional explain button via QueryExplainButtonComponent

• Autocomplete Items:

  • Rendered with bold-highlighted matches.
  • Supports facet counts from $facetCounts.
  • Fully keyboard- and mouse-navigable.

• Clear Group Button:

  • Clears the entire group when clicked.
  • Emits a clear-search event.

Props

Example

<lens-search-bar
    placeholderText="Search filters..."
    noMatchesFoundMessage="No criteria match"
    typeMoreMessage="Type at least 3 characters to search"
    index="{1}"
/>

Styling