Rocket Logo Rocket Guides Docs Blog Toggle darkmode

Search: Custom Elements

src/RocketSearch.js

Properties

static

scopedElements


public search
string
public

results

results
RocketSearchResult[]
public

noResultsText

noResultsText
string

miniSearch

MiniSearch|null
public

maxResults

max-results
number
public

jsonUrl

json-url
string

combobox

RocketSearchCombobox|null

Methods

setupSearch

Fetches the search index at this.jsonUrl and sets up the search engine.

Returns

Promise<void>

CSS Shadow Parts

Name Description
search-option search result
empty empty search results

CSS Custom Properties

Name Default Value Description
--rocket-search-input-border-radius
24px
Search input border radius
--rocket-search-input-border-color
#dfe1e5
Search input border colour
--rocket-search-highlight-color
#6c63ff
Highlighted search result text colour
--rocket-search-fill-color
#000
Search Icon Color
--rocket-search-caret-color
initial
Search input caret colour
--rocket-search-background-color
#fff
Search results background colour

Exports

import { RocketSearch } from '@rocket/search/src/RocketSearch';

src/RocketSearchCombobox.js

Properties

slots

LionCombobox['slots']

showInput

boolean

selectionFollowsFocus

boolean

rotateKeyboardNavigation

boolean

autocomplete

'none'

Methods

focus

Slots

prefix

listbox

label

input

CSS Custom Properties

Name Default Value Description
--rocket-search-input-overlay-border-color
#ccc
--rocket-search-input-border-radius
24px
--rocket-search-input-border-color
#dfe1e5
--rocket-search-fill-color
#000
--rocket-search-background-color
#fff
Private API

Private Methods

private

_defineOverlayConfig

private

_connectSlotMixin

Exports

import '@rocket/search/src/RocketSearchCombobox';
import { RocketSearchCombobox } from '@rocket/search/src/RocketSearchCombobox';