Search Result Renderer

ESM:

Use dark colors for code blocksCopy
import "@arcgis/map-components/components/arcgis-search-result-renderer";

CDN:

No specific import is needed for this component.

The Search Result Renderer renders the Search component results and allows expanding a DOM element to show alternative matches. These alternative matches appear in the Show more results link.

Properties

Property	Attribute	Type
`autoDestroyDisabled`	`auto-destroy-disabled`	`boolean`
`messages`		({ componentLabel?: string \| undefined; searchButtonTitle?: string \| undefined; placeholder?: string \| undefined; searchIn?: string \| undefined; all?: string \| undefined; allPlaceholder?: string \| undefined; locateError?: string \| undefined; untitledResult?: string \| undefined; untitledSource?: string \| undefined; noResults?: string \| undefined; noResultsFound?: string \| undefined; noResultsFoundForValue?: string \| undefined; showMoreResults?: string \| undefined; hideMoreResults?: string \| undefined; searchResult?: string \| undefined; moreResultsHeader?: string \| undefined; useCurrentLocation?: string \| undefined; } & { _lang: string; _t9nLocale: "id" \| "el" \| "hr" \| "th" \| "tr" \| "sl" \| "it" \| "ca" \| "de" \| "fi" \| "ar" \| "da" \| "vi" \| "pl" \| "et" \| "bs" \| "sk" \| "es" \| "en" \| "ru" \| "ro" \| "no" \| "lt" \| "cs" \| "he" \| "fr" \| "sv" \| "bg" \| "lv" \| "nl" \| "sr" \| "hu" \| "ja" \| "ko" \| "nb" \| "pt-BR" \| "pt-PT" \| "uk" \| "zh-CN" \| "zh-HK" \| "zh-TW"; _loading: boolean; _overrides: { componentLabel?: string \| undefined; searchButtonTitle?: string \| undefined; placeholder?: string \| undefined; searchIn?: string \| undefined; all?: string \| undefined; allPlaceholder?: string \| undefined; locateError?: string \| undefined; untitledResult?: string \| undefined; untitledSource?: string \| undefined; noResults?: string \| undefined; noResultsFound?: string \| undefined; noResultsFoundForValue?: string \| undefined; showMoreResults?: string \| undefined; hideMoreResults?: string \| undefined; searchResult?: string \| undefined; moreResultsHeader?: string \| undefined; useCurrentLocation?: string \| undefined; }; _original?: { componentLabel: string; searchButtonTitle: string; placeholder: string; searchIn: string; all: string; allPlaceholder: string; locateError: string; untitledResult: string; untitledSource: string; noResults: string; noResultsFound: string; noResultsFoundForValue: string; showMoreResults: string; hideMoreResults: string; searchResult: string; moreResultsHeader: string; useCurrentLocation: string; } \| undefined; })
`viewModel`		`SearchViewModel`

autoDestroyDisabled

Property

autoDestroyDisabled: boolean

If true, the component will not be destroyed automatically when it is disconnected from the document. This is useful when you want to move the component to a different place on the page, or temporarily hide it. If this is set, make sure to call the destroy method when you are done to prevent memory leaks.

Attribute: auto-destroy-disabled
Default value: false

messages

Property

messages: ({
    componentLabel?: string | undefined;
    searchButtonTitle?: string | undefined;
    placeholder?: string | undefined;
    searchIn?: string | undefined;
    all?: string | undefined;
    allPlaceholder?: string | undefined;
    locateError?: string | undefined;
    untitledResult?: string | undefined;
    untitledSource?: string | undefined;
    noResults?: string | undefined;
    noResultsFound?: string | undefined;
    noResultsFoundForValue?: string | undefined;
    showMoreResults?: string | undefined;
    hideMoreResults?: string | undefined;
    searchResult?: string | undefined;
    moreResultsHeader?: string | undefined;
    useCurrentLocation?: string | undefined;
} & {
    _lang: string;
    _t9nLocale: "id" | "el" | "hr" | "th" | "tr" | "sl" | "it" | "ca" | "de" | "fi" | "ar" | "da" | "vi" | "pl" | "et" | "bs" | "sk" | "es" | "en" | "ru" | "ro" | "no" | "lt" | "cs" | "he" | "fr" | "sv" | "bg" | "lv" | "nl" | "sr" | "hu" | "ja" | "ko" | "nb" | "pt-BR" | "pt-PT" | "uk" | "zh-CN" | "zh-HK" | "zh-TW";
    _loading: boolean;
    _overrides: {
        componentLabel?: string | undefined;
        searchButtonTitle?: string | undefined;
        placeholder?: string | undefined;
        searchIn?: string | undefined;
        all?: string | undefined;
        allPlaceholder?: string | undefined;
        locateError?: string | undefined;
        untitledResult?: string | undefined;
        untitledSource?: string | undefined;
        noResults?: string | undefined;
        noResultsFound?: string | undefined;
        noResultsFoundForValue?: string | undefined;
        showMoreResults?: string | undefined;
        hideMoreResults?: string | undefined;
        searchResult?: string | undefined;
        moreResultsHeader?: string | undefined;
        useCurrentLocation?: string | undefined;
    };
    _original?: {
        componentLabel: string;
        searchButtonTitle: string;
        placeholder: string;
        searchIn: string;
        all: string;
        allPlaceholder: string;
        locateError: string;
        untitledResult: string;
        untitledSource: string;
        noResults: string;
        noResultsFound: string;
        noResultsFoundForValue: string;
        showMoreResults: string;
        hideMoreResults: string;
        searchResult: string;
        moreResultsHeader: string;
        useCurrentLocation: string;
    } | undefined;
})

viewModel

Property

viewModel: SearchViewModel

Slots

No slots to display.

Events

Event	Type
`arcgisReady`	`CustomEvent<void>`

arcgisReady

Event

arcgisReady: CustomEvent<void>

Emitted when the component associated with a map or scene view is is ready to be interacted with.

Methods

Method	Signature
`componentOnReady`	`componentOnReady(): Promise<void>`
`destroy`	`destroy(): Promise<void>`

componentOnReady

Method

componentOnReady(): Promise<void>

Create a promise that resolves once component is fully loaded.

Example

Use dark colors for code blocksCopy
const arcgisSearchResultRenderer = document.querySelector("arcgis-search-result-renderer");
document.body.append(arcgisSearchResultRenderer);
await arcgisSearchResultRenderer.componentOnReady();
console.log("arcgis-search-result-renderer is ready to go!");

Returns: Promise<void>

destroy

Method

destroy(): Promise<void>

Permanently destroy the component.

Returns: Promise<void>