Search Result

Search component

<loquix-search-result> renders a single result row. Pass the whole thing as a result object, or fill the individual attributes when you only have loose values on hand.

loquix-search-resultobject or attributescancelable clicks

Preview

Result rows Live component

The first two rows come from result objects; the third uses plain attributes and is disabled.

Usage

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

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

row.result = {
  rank: 1,
  title: 'Refund policy',
  url: 'https://example.com/policies/refunds',
  snippet: 'Customers may request a full refund within 30 days of delivery.',
  source: { id: 'docs', name: 'Docs', icon: '📘' },
};

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

The click event is cancelable, so preventDefault() keeps the user on the page.

The search result object

Field	Type	Required	Description
title	string	yes	Result title.
url	string	no	Destination. Only http(s) URLs render as anchors.
displayUrl	string	no	Short path shown in the metadata row.
snippet	string	no	Excerpt or match snippet.
meta	string	no	Extra metadata, such as updated yesterday.
rank	number | null	no	One-based rank. Omit to number by position; pass null to leave the row unnumbered.
source	SearchSource	no	Where the result came from. See the search source object.
citationRef	number	no	Citation number this result supports in an AI answer.
id	string	no	Stable identifier.

Attributes are a fallback, not a merge

sourceName, title, url, and the rest exist for cases where you have no result object. When result is set, it supplies the row.

Properties

Property	Attribute	Type	Default	Description
result	—	SearchResult	—	The full result. Property-only.
rank	rank	number	—	One-based rank override.
title	title	string	''	Title fallback.
url	url	string	—	URL fallback.
displayUrl	display-url	string	—	Display URL fallback.
snippet	snippet	string	—	Snippet fallback.
meta	meta	string	—	Metadata fallback.
sourceName	source-name	string	—	Source name fallback.
sourceIcon	source-icon	string	—	Source icon fallback.
citationRef	citation-ref	number	—	Citation reference fallback.
disabled	disabled	boolean	false	Disables the row.

Events

Event	Detail	Description
loquix-search-result-click	{ result, index }	Cancelable. Fired before navigation.

CSS parts

Part	Purpose
row	The clickable row.
rank	Rank column.
source	Source label.
title	Result title.
snippet	Result snippet.

Use Search Results to render a whole list rather than wiring rows one at a time.