Search Bar

The lens-searchbar component offers an interface for exploring of all single-select 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

Events

on:clear-search

Triggered when the group clear button is clicked.

<lens-search-bar on:clear-search={handleClear} />

Example

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

Styling