Search Results

Search component

<loquix-search-results> takes the array of results and renders the rows. Two layouts: one ranked list across all sources, or grouped under a heading per source.

loquix-search-resultsblended or sectionedbuilt-in empty state

Preview

Sectioned by source Live component

Usage

import '@loquix/core/define/define-search-results';
import '@loquix/core/define/define-search-result';

const results = document.querySelector('loquix-search-results');

results.results = response.hits;

Rows are rendered from the array, so the click event bubbles from the individual Search Result rows.

results.addEventListener('loquix-search-result-click', (event) => {
  event.preventDefault();
  openInSidePanel(event.detail.result);
});

Layouts

Layout	Use it for
blended	One ranked list across every source. Best when relevance matters more than provenance.
sectioned	Grouped under a header per source. Best when the user thinks in terms of where something lives.

An empty array renders the empty state; emptyText replaces its wording.

Properties

Property	Attribute	Type	Default	Description
results	—	SearchResult[]	[]	The results to render. Property-only. See the search result object.
layout	layout	'blended' | 'sectioned'	'blended'	Layout variant.
emptyText	empty-text	string	localized	Empty-state text.

CSS parts

Part	Purpose
container	Outer wrapper.
empty	Empty-state text.
section	A grouped source section.
section-header	A source section header.
section-items	Result rows inside a section.