Use dark colors for code blocks Copy
1
import "@arcgis/map-components/components/arcgis-search";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.
Property
activeMenu: "none" | "source" | "suggestion"
The current active menu of the Search component.
readonlyProperty
The source object currently selected. Can be either a LayerSearchSource or a LocatorSearchSource.
Property
activeSourceIndex: number
The selected source's index. This value is -1 when all sources are selected.
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.
readonlyProperty
The combined collection of defaultSources and sources. The defaultSources displays first in the Search UI.
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.
Property
autoNavigateDisabled: boolean
Indicates whether to automatically navigate to the selected result.
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.
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.
Property
disabled: boolean
When true, the component is visually withdrawn and cannot be interacted with.
Property
goToOverride: (((view: MapView | SceneView, goToParameters: GoToParameters) => void))
This function provides the ability to override either the MapView goTo() or SceneView goTo() methods.
Property
icon: string
Icon which represents the component. Typically used when the component is controlled by another component (e.g. by the Expand component).
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.
Property
label: string
The component's default label.
Property
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). :::
Property
maxResults: number
The maximum number of results returned by the component if not specified by the source.
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.
Property
messageOverrides: Record<string, unknown>
Replace localized message strings with your own strings.
Note: Individual message keys may change between releases.
Property
minSuggestCharacters: number
The minimum number of characters needed for the search if not specified by the source.
Property
popupDisabled: boolean
Indicates whether to display the Popup on feature click. The graphic can be clicked to display a Popup.
Property
A customized PopupTemplate for the selected feature. Note that any templates defined on allSources take precedence over those defined directly on the template.
Property
It is possible to search a specified portal instance's locator services Use this property to set this ArcGIS Portal instance to search.
position: "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"
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.
readonlyProperty
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. :::
Property
resultGraphicDisabled: boolean
Indicates if the resultGraphic will display at the location of the selected feature.
readonlyProperty
An array of objects, each containing a SearchResult from the search.
Property
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:
Property
searchTerm: string
The value of the search box input text string.
readonlyProperty
The result selected from a search.
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: "disabled" | "loading" | "ready" | "searching"
The current state of the component.
readonlyProperty
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.
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.
No slots to display.
Events arcgisPropertyChangeEvent
arcgisPropertyChange: CustomEvent<{ name: "state"; }>
Emitted when the value of a property is changed. Use this to listen to changes to properties.
bubblesEvents triggered on this element will be propagated to their outermost elements.
composedThe event is composable and will propagate across the shadow DOM into the standard DOM.
cancelableThe event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
arcgisReadyEvent
arcgisReady: CustomEvent<void>
Emitted when the component associated with a map or scene view is is ready to be interacted with.
bubblesEvents triggered on this element will be propagated to their outermost elements.
composedThe event is composable and will propagate across the shadow DOM into the standard DOM.
cancelableThe event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
arcgisSearchClearEvent
arcgisSearchClear: SearchViewModelSearchClearEvent
Fires when a result is cleared from the input box or a new result is selected.
bubblesEvents triggered on this element will be propagated to their outermost elements.
composedThe event is composable and will propagate across the shadow DOM into the standard DOM.
cancelableThe event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
arcgisSearchCompleteEvent
arcgisSearchComplete: SearchViewModelSearchCompleteEvent
Fires when the search() method is called and returns its results.
bubblesEvents triggered on this element will be propagated to their outermost elements.
composedThe event is composable and will propagate across the shadow DOM into the standard DOM.
cancelableThe event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
arcgisSearchStartEvent
arcgisSearchStart: SearchViewModelSearchStartEvent
Fires when the search() method starts.
bubblesEvents triggered on this element will be propagated to their outermost elements.
composedThe event is composable and will propagate across the shadow DOM into the standard DOM.
cancelableThe event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
arcgisSelectResultEvent
arcgisSelectResult: SearchViewModelSelectResultEvent
Fires when a search result is selected.
bubblesEvents triggered on this element will be propagated to their outermost elements.
composedThe event is composable and will propagate across the shadow DOM into the standard DOM.
cancelableThe event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
arcgisSuggestCompleteEvent
arcgisSuggestComplete: SearchViewModelSuggestCompleteEvent
Fires when the suggest method is called and returns its results.
bubblesEvents triggered on this element will be propagated to their outermost elements.
composedThe event is composable and will propagate across the shadow DOM into the standard DOM.
cancelableThe event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
arcgisSuggestStartEvent
arcgisSuggestStart: SearchViewModelSuggestStartEvent
Fires when the suggest() method starts.
bubblesEvents triggered on this element will be propagated to their outermost elements.
composedThe event is composable and will propagate across the shadow DOM into the standard DOM.
cancelableThe event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
Methods Method Signatureclear
clear(): void
componentOnReady
componentOnReady(): Promise<void>
destroy
destroy(): Promise<void>
search
search(searchItem?: __esri.Graphic | __esri.Point | __esri.SuggestResult | Nil | number[] | string): Promise<__esri.SearchResponse | Nil>
setFocus
setFocus(): Promise<void>
suggest
suggest(query?: string): Promise<__esri.SuggestResponse | Nil>
Method
clear(): void
Clears the current searchTerm, search results, suggest results, graphic, and graphics layer. It also hides any open menus.
Method
componentOnReady(): Promise<void>
Create a promise that resolves once component is fully loaded.
ExampleUse dark colors for code blocks Copy
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!");Method
destroy(): Promise<void>
Permanently destroy the component.
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.
ParametersMethod
setFocus(): Promise<void>
Brings focus to the component's text input.
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.
query
string | undefined
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4