import "@arcgis/map-components/components/arcgis-search";
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
Property | Attribute | Type |
---|---|---|
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 | |
defaultSources readonly |
| |
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 | ||
resultGraphic readonly |
| |
result-graphic-disabled | boolean | |
results readonly |
| Array<SearchResults> |
search-all-disabled | boolean | |
search-term | string | |
selectedResult readonly |
| |
| ||
state readonly | state | "disabled" | "loading" | "ready" | "searching" |
suggestions readonly |
| Array<SuggestResults> |
suggestions-disabled | boolean |
activeMenu
activeMenu: "none" | "source" | "suggestion"
The current active menu of the Search component.
- Attribute
- active-menu
- Default value
- "none"
activeSource
activeSource: LayerSearchSource | LocatorSearchSource
The source object currently selected. Can be either a LayerSearchSource or a LocatorSearchSource.
- Default value
- null
activeSourceIndex
activeSourceIndex: number
The selected source's index. This value is -1
when all sources are selected.
- Attribute
- active-source-index
- Default value
- 0
allPlaceholder
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.
- Attribute
- all-placeholder
- Default value
- "Find address or place"
allSources
allSources: Collection<LayerSearchSource | LocatorSearchSource>
The combined collection of defaultSources and sources. The defaultSources displays first in the Search UI.
autoDestroyDisabled
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
autoNavigateDisabled: boolean
Indicates whether to automatically navigate to the selected result.
- Attribute
- auto-navigate-disabled
- Default value
- false
autoSelectDisabled
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
defaultSources: Collection<LayerSearchSource | LocatorSearchSource>
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
disabled: boolean
When true, the component is visually withdrawn and cannot be interacted with.
- Attribute
- disabled
- Default value
- false
goToOverride
goToOverride: (((view: MapView | SceneView, goToParameters: GoToParameters) => void))
This function provides the ability to override either the MapView goTo() or SceneView goTo() methods.
icon
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
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
locationDisabled
locationDisabled: boolean
Enables location services within the component.
::: 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
maxResults: number
The maximum number of results returned by the component if not specified by the source.
- Attribute
- max-results
- Default value
- 6
maxSuggestions
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
messageOverrides: Record<string, unknown>
Replace localized message strings with your own strings.
Note: Individual message keys may change between releases.
minSuggestCharacters
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
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
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
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
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
referenceElement: HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string
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.
- Attribute
- reference-element
resultGraphic
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
resultGraphicDisabled: boolean
Indicates if the resultGraphic will display at the location of the selected feature.
- Attribute
- result-graphic-disabled
- Default value
- false
results
results: Array<SearchResults>
An array of objects, each containing a SearchResult from the search.
- Default value
- null
searchAllDisabled
searchAllDisabled: boolean
Indicates whether to display the option to search all sources. When true
, the "All" option
is displayed by default:
When false
, no option to search all sources at once is available:
- Attribute
- search-all-disabled
- Default value
- false
searchTerm
searchTerm: string
The value of the search box input text string.
- Attribute
- search-term
selectedResult
selectedResult: SearchResult
The result selected from a search.
- See also
- Default value
- null
sources
sources: Collection<LayerSearchSource | LocatorSearchSource>
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
state: "disabled" | "loading" | "ready" | "searching"
The current state of the component.
- Attribute
- state
- Default value
- "ready"
suggestions
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
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
Events
Event | Type |
---|---|
CustomEvent<{ name: "state"; }> | |
CustomEvent<void> | |
SearchViewModelSearchClearEvent | |
SearchViewModelSearchCompleteEvent | |
SearchViewModelSearchStartEvent | |
SearchViewModelSelectResultEvent | |
SearchViewModelSuggestCompleteEvent | |
SearchViewModelSuggestStartEvent |
arcgisPropertyChange
arcgisPropertyChange: CustomEvent<{ name: "state"; }>
Emitted when the value of a property is changed. Use this to listen to changes to properties.
Events triggered on this element will be propagated to their outermost elements.
The event is composable and will propagate across the shadow DOM into the standard DOM.
The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
arcgisReady
arcgisReady: CustomEvent<void>
Emitted when the component associated with a map or scene view is is ready to be interacted with.
Events triggered on this element will be propagated to their outermost elements.
The event is composable and will propagate across the shadow DOM into the standard DOM.
The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
arcgisSearchClear
arcgisSearchClear: SearchViewModelSearchClearEvent
Fires when a result is cleared from the input box or a new result is selected.
Events triggered on this element will be propagated to their outermost elements.
The event is composable and will propagate across the shadow DOM into the standard DOM.
The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
arcgisSearchComplete
arcgisSearchComplete: SearchViewModelSearchCompleteEvent
Fires when the search() method is called and returns its results.
Events triggered on this element will be propagated to their outermost elements.
The event is composable and will propagate across the shadow DOM into the standard DOM.
The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
arcgisSearchStart
arcgisSearchStart: SearchViewModelSearchStartEvent
Fires when the search() method starts.
Events triggered on this element will be propagated to their outermost elements.
The event is composable and will propagate across the shadow DOM into the standard DOM.
The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
arcgisSelectResult
arcgisSelectResult: SearchViewModelSelectResultEvent
Fires when a search result is selected.
Events triggered on this element will be propagated to their outermost elements.
The event is composable and will propagate across the shadow DOM into the standard DOM.
The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
arcgisSuggestComplete
arcgisSuggestComplete: SearchViewModelSuggestCompleteEvent
Fires when the suggest method is called and returns its results.
Events triggered on this element will be propagated to their outermost elements.
The event is composable and will propagate across the shadow DOM into the standard DOM.
The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
arcgisSuggestStart
arcgisSuggestStart: SearchViewModelSuggestStartEvent
Fires when the suggest() method starts.
Events triggered on this element will be propagated to their outermost elements.
The event is composable and will propagate across the shadow DOM into the standard DOM.
The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
Methods
Method | Signature |
---|---|
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
clear(): void
Clears the current searchTerm, search results, suggest results, graphic, and graphics layer. It also hides any open menus.
- Returns
- void
componentOnReady
componentOnReady(): Promise<void>
Create a promise that resolves once component is fully loaded.
Example
const arcgisSearch = document.querySelector("arcgis-search");
document.body.append(arcgisSearch);
await arcgisSearch.componentOnReady();
console.log("arcgis-search is ready to go!");
- Returns
- Promise<void>
search
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
Parameter | Type | Optional? |
---|---|---|
searchItem | Array<number> | Graphic | Point | SuggestResult | null | string | undefined |
- Returns
- Promise<SearchResponse | null | undefined>
setFocus
setFocus(): Promise<void>
Brings focus to the component's text input.
- Returns
- Promise<void>
suggest
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
Parameter | Type | Optional? |
---|---|---|
query | string | undefined |
- Returns
- Promise<SuggestResponse | null | undefined>