Search

ESM:
Use dark colors for code blocksCopy
1
import "@arcgis/map-components/components/arcgis-search";
CDN:
No specific import is needed for this component.

The Search component provides a way to perform search operations on locator service(s), map/feature service feature layer(s), SceneLayers with an associated feature layer, BuildingComponentSublayer with an associated feature layer, GeoJSONLayer, CSVLayer, OGCFeatureLayer, and/or table(s). If using a locator with a geocoding service, the findAddressCandidates operation is used, whereas queries are used on feature layers.

By default, the Search component uses the ArcGIS World Geocoding Service via this URL: https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer. If a global apiKey is present, the Search component uses this URL: https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer. If an apiKey is present on the LocatorSearchSource, then the Search component uses the URL defined by the LocatorSearchSource.url property.

The Search component sets the view on the Search result. The level of detail (LOD) at the center of the view depends on the data source, with higher quality data sources returning extents closer to the feature obtained from the search. To manually define the scale of the view at the Search result, use the zoomScale property of the LocatorSearchSource or LayerSearchSource. Search component results are typically sorted according to their relevance to the search and their relative importance. However, when the scale of the MapView or SceneView is less than or equal to 300,000, the operations support prioritization of candidates based on their distance from a specified point (the center of the view) by passing in the location parameter. Features closest to the input location show up higher in the list of results. This behavior can be changed by using the localSearchDisabled property.

Demo

Properties

PropertyAttributeType
active-menu
"none" | "source" | "suggestion"
activeSource
readonly
active-source-index
number
all-placeholder
string
allSources
readonly
auto-destroy-disabled
boolean
auto-navigate-disabled
boolean
auto-select-disabled
boolean
disabled
boolean
(((view: MapView | SceneView, goToParameters: GoToParameters) => void))
icon
string
include-default-sources-disabled
Function | boolean
label
string
location-disabled
boolean
max-results
number
max-suggestions
number
Record<string, unknown>
min-suggest-characters
number
popup-disabled
boolean
position
"bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"
reference-element
result-graphic-disabled
boolean
results
readonly
search-all-disabled
boolean
search-term
string
state
readonly
state
"disabled" | "loading" | "ready" | "searching"
suggestions
readonly
suggestions-disabled
boolean

activeMenu

Property
activeMenu: "none" | "source" | "suggestion"

The current active menu of the Search component.

Attribute
active-menu
Default value
"none"

activeSource

readonlyProperty

The source object currently selected. Can be either a LayerSearchSource or a LocatorSearchSource.

Default value
null

activeSourceIndex

Property
activeSourceIndex: number

The selected source's index. This value is -1 when all sources are selected.

Attribute
active-source-index
Default value
0

allPlaceholder

Property
allPlaceholder: string

String value used as a hint for input text when searching on multiple sources. See the image below to view the location and style of this text in the context of the component.

search-allPlaceholder

Attribute
all-placeholder
Default value
"Find address or place"

allSources

readonlyProperty

The combined collection of defaultSources and sources. The defaultSources displays first in the Search UI.

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

autoNavigateDisabled

Property
autoNavigateDisabled: boolean

Indicates whether to automatically navigate to the selected result.

Attribute
auto-navigate-disabled
Default value
false

autoSelectDisabled

Property
autoSelectDisabled: boolean

Indicates whether to automatically select and zoom to the first geocoded result. If false, the findAddressCandidates operation will still geocode the input string, but the top result will not be selected. To work with the geocoded results, you can set up a search-complete event handler and get the results through the event object.

Attribute
auto-select-disabled
Default value
false

defaultSources

readonlyProperty

A read-only property that is a Collection of LayerSearchSource and/or LocatorSearchSource. This property may contain ArcGIS Portal locators and any web map or web scene configurable search sources. Web maps or web scenes may contain map/feature service feature layer(s), and/or table(s) as sources.

This property is used to populate the Search UI if the sources property is not set.

disabled

Property
disabled: boolean

When true, the component is visually withdrawn and cannot be interacted with.

Attribute
disabled
Default value
false

goToOverride

Property
goToOverride: (((view: MapView | SceneView, goToParameters: GoToParameters) => void))

This function provides the ability to override either the MapView goTo() or SceneView goTo() methods.

Read more...

icon

Property
icon: string

Icon which represents the component. Typically used when the component is controlled by another component (e.g. by the Expand component).

See also
Attribute
icon
Default value
"search"

includeDefaultSourcesDisabled

Property
includeDefaultSourcesDisabled: Function | boolean

Indicates whether or not to include defaultSources in the Search UI. This can be a boolean value or a function that returns an array of Search sources.

Attribute
include-default-sources-disabled
Default value
false

label

Property
label: string

The component's default label.

Attribute
label

locationDisabled

Property
locationDisabled: boolean

Enables location services within the component.

locationEnabled

::: esri-md class="warning" The use of this property is only supported on secure origins. To use it, switch your application to a secure origin, such as HTTPS. Note that localhost is considered "potentially secure" and can be used for easy testing in browsers that supports Window.isSecureContext (currently Chrome and Firefox). :::

Attribute
location-disabled
Default value
false

maxResults

Property
maxResults: number

The maximum number of results returned by the component if not specified by the source.

Attribute
max-results
Default value
6

maxSuggestions

Property
maxSuggestions: number

The maximum number of suggestions returned by the component if not specified by the source.

If working with the default ArcGIS Online Geocoding service, the default remains at 5.

Attribute
max-suggestions
Default value
6

messageOverrides

Property
messageOverrides: Record<string, unknown>

Replace localized message strings with your own strings.

Note: Individual message keys may change between releases.

minSuggestCharacters

Property
minSuggestCharacters: number

The minimum number of characters needed for the search if not specified by the source.

Attribute
min-suggest-characters
Default value
3

popupDisabled

Property
popupDisabled: boolean

Indicates whether to display the Popup on feature click. The graphic can be clicked to display a Popup.

Attribute
popup-disabled
Default value
false

popupTemplate

Property
popupTemplate: PopupTemplate

A customized PopupTemplate for the selected feature. Note that any templates defined on allSources take precedence over those defined directly on the template.

Default value
null

portal

Property
portal: Portal

It is possible to search a specified portal instance's locator services Use this property to set this ArcGIS Portal instance to search.

position

reflected

Attribute changes are reflected on the DOM.

Property
position: "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"
Attribute
position
Default value
"top-left"

referenceElement

Property

By assigning the id attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.

See also
Attribute
reference-element

resultGraphic

readonlyProperty
resultGraphic: Graphic

The graphic used to highlight the resulting feature or location.

:::esri-md class="panel trailer-1" A graphic will be placed in the View's graphics for layer that do not support the highlight method. :::

Default value
null

resultGraphicDisabled

Property
resultGraphicDisabled: boolean

Indicates if the resultGraphic will display at the location of the selected feature.

Attribute
result-graphic-disabled
Default value
false

results

readonlyProperty
results: Array<SearchResults>

An array of objects, each containing a SearchResult from the search.

Default value
null

searchAllDisabled

Property
searchAllDisabled: boolean

Indicates whether to display the option to search all sources. When true, the "All" option is displayed by default:

search-searchAllEnabled-true

When false, no option to search all sources at once is available:

search-searchAllEnabled-false

Attribute
search-all-disabled
Default value
false

searchTerm

Property
searchTerm: string

The value of the search box input text string.

Attribute
search-term

selectedResult

readonlyProperty
selectedResult: SearchResult

The result selected from a search.

See also
Default value
null

sources

Property

The Search component may be used to search features in a map/feature service feature layer(s), SceneLayers with an associated feature layer, BuildingComponentSublayer with an associated feature layer, GeoJSONLayer, CSVLayer or OGCFeatureLayer, or table, or geocode locations with a locator. The sources property defines the sources from which to search for the view specified by the Search component instance. There are two types of sources:

Any combination of these sources may be used together in the same instance of the Search component.

::: esri-md class="warning" Feature layers created from client-side graphics are not supported. :::

state

readonlyreflected

Attribute changes are reflected on the DOM.

Property
state: "disabled" | "loading" | "ready" | "searching"

The current state of the component.

Attribute
state
Default value
"ready"

suggestions

readonlyProperty
suggestions: Array<SuggestResults>

An array of results from the suggest method.

This is available if working with a 10.3 or greater geocoding service that has suggest capability loaded or a 10.3 or greater feature layer that supports pagination, i.e. supportsPagination = true.

Default value
null

suggestionsDisabled

Property
suggestionsDisabled: boolean

Enable suggestions for the component.

This is only available if working with a 10.3 or greater geocoding service that has suggest capability loaded or a 10.3 or greater feature layer that supports pagination, i.e. supportsPagination = true.

Attribute
suggestions-disabled
Default value
false

Slots

No slots to display.

Events

EventType
CustomEvent<{ name: "state"; }>
SearchViewModelSearchClearEvent
SearchViewModelSearchCompleteEvent
SearchViewModelSearchStartEvent
SearchViewModelSelectResultEvent
SearchViewModelSuggestCompleteEvent
SearchViewModelSuggestStartEvent

arcgisPropertyChange

Event
arcgisPropertyChange: CustomEvent<{ name: "state"; }>

Emitted when the value of a property is changed. Use this to listen to changes to properties.

bubbles

Events triggered on this element will be propagated to their outermost elements.

composed

The event is composable and will propagate across the shadow DOM into the standard DOM.

cancelable

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

arcgisReady

Event
arcgisReady: CustomEvent<void>

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

bubbles

Events triggered on this element will be propagated to their outermost elements.

composed

The event is composable and will propagate across the shadow DOM into the standard DOM.

cancelable

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

arcgisSearchClear

Event
arcgisSearchClear: SearchViewModelSearchClearEvent

Fires when a result is cleared from the input box or a new result is selected.

bubbles

Events triggered on this element will be propagated to their outermost elements.

composed

The event is composable and will propagate across the shadow DOM into the standard DOM.

cancelable

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

arcgisSearchComplete

Event
arcgisSearchComplete: SearchViewModelSearchCompleteEvent

Fires when the search() method is called and returns its results.

bubbles

Events triggered on this element will be propagated to their outermost elements.

composed

The event is composable and will propagate across the shadow DOM into the standard DOM.

cancelable

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

arcgisSearchStart

Event
arcgisSearchStart: SearchViewModelSearchStartEvent

Fires when the search() method starts.

bubbles

Events triggered on this element will be propagated to their outermost elements.

composed

The event is composable and will propagate across the shadow DOM into the standard DOM.

cancelable

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

arcgisSelectResult

Event
arcgisSelectResult: SearchViewModelSelectResultEvent

Fires when a search result is selected.

bubbles

Events triggered on this element will be propagated to their outermost elements.

composed

The event is composable and will propagate across the shadow DOM into the standard DOM.

cancelable

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

arcgisSuggestComplete

Event
arcgisSuggestComplete: SearchViewModelSuggestCompleteEvent

Fires when the suggest method is called and returns its results.

bubbles

Events triggered on this element will be propagated to their outermost elements.

composed

The event is composable and will propagate across the shadow DOM into the standard DOM.

cancelable

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

arcgisSuggestStart

Event
arcgisSuggestStart: SearchViewModelSuggestStartEvent

Fires when the suggest() method starts.

bubbles

Events triggered on this element will be propagated to their outermost elements.

composed

The event is composable and will propagate across the shadow DOM into the standard DOM.

cancelable

The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.

Methods

MethodSignature
clear(): void
componentOnReady(): Promise<void>
destroy(): Promise<void>
search(searchItem?: __esri.Graphic | __esri.Point | __esri.SuggestResult | Nil | number[] | string): Promise<__esri.SearchResponse | Nil>
setFocus(): Promise<void>
suggest(query?: string): Promise<__esri.SuggestResponse | Nil>

clear

Method
clear(): void

Clears the current searchTerm, search results, suggest results, graphic, and graphics layer. It also hides any open menus.

Returns
void

componentOnReady

Method
componentOnReady(): Promise<void>

Create a promise that resolves once component is fully loaded.

Example
Use dark colors for code blocksCopy
1
2
3
4
const arcgisSearch = document.querySelector("arcgis-search");
document.body.append(arcgisSearch);
await arcgisSearch.componentOnReady();
console.log("arcgis-search is ready to go!");
Returns
Promise<void>

destroy

Method
destroy(): Promise<void>

Permanently destroy the component.

Returns
Promise<void>
Method
search(searchItem?: __esri.Graphic | __esri.Point | __esri.SuggestResult | Nil | number[] | string): Promise<__esri.SearchResponse | Nil>

Depending on the sources specified, search() queries the feature layer(s) and/or performs address matching using any specified locator(s) and returns any applicable results.

Parameters
ParameterTypeOptional?
searchItem
Array<number> | Graphic | Point | SuggestResult | null | string | undefined
Returns
Promise<SearchResponse | null | undefined>

setFocus

Method
setFocus(): Promise<void>

Brings focus to the component's text input.

Returns
Promise<void>

suggest

Method
suggest(query?: string): Promise<__esri.SuggestResponse | Nil>

Performs a suggest() request on the active Locator. It also uses the current value of the component or one that is passed in.

Suggestions are available if working with a 10.3 or greater geocoding service that has suggest capability loaded or a 10.3 or greater feature layer that supports pagination, i.e. supportsPagination = true.

Parameters
ParameterTypeOptional?
query
string | undefined
Returns
Promise<SuggestResponse | null | undefined>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.