Autosuggest

Suggestions displayed as characters are added using a widget and the geocoding serivce

What is autosuggest?

Autosuggest, also known as autocomplete, is the process of using incomplete text to search for place names and addresses. For example, you can search for "New Y", "Dodgers S", and "Cali" to get a list of suggested place names that match.

You can use autosuggest to build applications that:

  • Autocomplete addresses and places as you type.
  • Provide a list of suggestions for incomplete address and place names.
  • Refine place names and addresses to improve geocoding accuracy.

How autosuggest works

You can get address and place name suggestions by making an HTTP request to the geocoding service suggest operation or by using client APIs. Specify the address or place name text, and optionally, additional parameters to refine the search.

You can provide text for a partial place name or a partial address to get search results. Typically 2-3 characters are needed to start searching.

To refine the search and improve accuracy, you can provide additional information such as the location, search extent, category, and country code.

The geocoding service parses the text and uses all of the parameters provided to return a set of suggestions. Each suggestion contains text (address or place name), isCollection (single distinct place or multiple with the same name or category), and magicKey (search identifier) properties.

URL request

 
1
https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest?<parameters>

Key parameters

NameDescriptionExamples
textThe partial address or place name. Different formats are supported.text=starbutext=100, main sttext=New Y

Additional parameters: Refine the search by using parameters such as location, searchExtent, category, and countryCode.

Examples

Get suggestions for a string

This example finds suggestions for the string New Y. To find the actual address and location for a suggestion, you have to pass each text and magicKey value to the geocoding service. Most APIs provide a LocatorTask to access the service.

Steps

  1. Reference the geocoding service.

  2. Set the text to search for.

  3. Set the API key.

The response is a set of suggestions (max of 5) containing the text and magicKey properties. Use these properties to search for the complete address with a location.

APIs

ArcGIS JS APIEsri LeafletMapbox GL JSOpenLayersArcGIS REST JSArcGIS .NET APIArcGIS Android APIArcGIS iOS APIArcGIS Java APIArcGIS Qt API (C++)ArcGIS Qt API (QML)
                                                                                                                                                   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS Developer Guide: Forward geocoding</title>
      <!-- ArcGIS Mapping APIs and Location Services Developer Guide
      Learn more: https://developers.arcgis.com/documentation/mapping-apis-and-services/search/
      -->
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.20/"></script>

  <script>
    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",
      "esri/Graphic",
      "esri/rest/locator",
    ],(esriConfig, Map, MapView, Graphic, locator)=> {
      esriConfig.apiKey = "YOUR_API_KEY";
      const map = new Map({
        basemap: "arcgis-light-gray", //Basemap layer service
      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-25, 30],
        zoom: 2,
        constraints: {
          snapToZoom: false
      const select = document.createElement("select", "");
      select.setAttribute("class", "esri-widget esri-select");
        "style",
        "width: 275px; font-family: 'Avenir Next'; font-size: 1em"
      const option = document.createElement("option");
      option.innerHTML = "See suggestions for \"New Y\"...";
      view.ui.add(select, "top-right");
      view.when(() => {
        locatorUrl = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer";

        const params = {
          text: "New Y", // Suggestion text
        };

        locator.suggestLocations(locatorUrl, params).then((response) => {
          // Show a list of the suggestions
          response.forEach((suggestion) => {
            showSuggestion(suggestion.text, suggestion.magicKey);
          });
          // When a suggestion is selected, geocode to find its location
          select.addEventListener("change", (event) => {
            const text = event.target.innerHTML;
            const magicKey = event.target.value;
            geocodeSuggestion(text, magicKey);
          });
        });
      function showSuggestion(text, magicKey) {
        const option = document.createElement("option");
      function geocodeSuggestion(suggestionText, magicKey) {
        const params = {
          SingeLine: suggestionText, // suggestion text
          address: {
            magicKey: magicKey, // suggestion magic key
          outFields: ["PlaceName", "Place_addr", "LongLabel"],
        // Geocode suggestion and show location
        locator.addressToLocations(locatorUrl,params).then((results) => {
      function showSearchResult(results) {
        if (!results.length) {
          return;
        const result = results[0];
        const graphic = new Graphic({
          symbol: {
            type: "simple-marker",
            color: "#000000",
            size: "8px",
            outline: {
              color: "#ffffff",
              width: "1px",
          geometry: result.location,
          attributes: result.attributes,
          popupTemplate: {
            title: "{PlaceName}",
            content:
              "{LongLabel}" +
              "<br><br>" +
              result.location.longitude.toFixed(5) +
              "," +
              result.location.latitude.toFixed(5),
          features: [graphic],
          location: result.location,
          target: result.location,
          zoom: 13,
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

REST API

RequestResponse
    
1
2
3
4
curl https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer \
-d 'f=pjson' \
-d 'text=New Y' \
-d 'token=<ACCESS_TOKEN>'

Response (JSON)

                             
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
  "suggestions": [
    {
      "text": "New York, NY, USA",
      "magicKey": "dHA9MCNsb2M9NzUwOTc4OCNsbmc9MzMjcGw9MjcxNjU1MyNsYnM9MTQ6MjM4MTIyMzc=",
      "isCollection": false
    },
    {
      "text": "New York, USA",
      "magicKey": "dHA9MCNsb2M9NzMxOTEwOCNsbmc9MzMjcGw9MjU5OTMyMyNsYnM9MTQ6MjM4MTIyMzc=",
      "isCollection": false
    },
    {
      "text": "New York international Airport, New York, NY, USA",
      "magicKey": "dHA9MCNsb2M9OTc0ODU4OCNsbmc9MzMjcGw9MzYwNTMyOSNsYnM9MTQ6MjM4MTMzMTk=",
      "isCollection": false
    },
    {
      "text": "New York Stad, Nouvieau York, NY, USA",
      "magicKey": "dHA9MCNsb2M9OTc0ODY4OCNsbmc9MzMjcGw9MzYwNzI0MyNsYnM9MTQ6MjM4MTMwOTc=",
      "isCollection": false
    },
    {
      "text": "New York Mills, NY, USA",
      "magicKey": "dHA9MCNsb2M9NzUwMTA0MyNsbmc9MzMjcGw9MjcxMzU0MyNsYnM9MTQ6MjM4MTI4NDA=",
      "isCollection": false
    }
  ]
}

Tutorials

Services

Geocoding service

Search for addresses, businesses, and places around the world.

API support

GeocodingReverse GeocodingBatch GeocodingPlace/POI SearchAutosuggestUI Component
ArcGIS API for JavaScriptFully supportedFully supportedFully supportedFully supportedFully supportedFully supported
ArcGIS API for AndroidFully supportedFully supportedFully supportedFully supportedFully supportedNot supported
ArcGIS API for iOSFully supportedFully supportedFully supportedFully supportedFully supportedNot supported
ArcGIS API for JavaFully supportedFully supportedFully supportedFully supportedFully supportedNot supported
ArcGIS API for .NETFully supportedFully supportedFully supportedFully supportedFully supportedNot supported
ArcGIS API for QtFully supportedFully supportedFully supportedFully supportedFully supportedNot supported
ArcGIS API for PythonFully supportedFully supportedFully supportedFully supportedFully supportedNot supported
Esri LeafletFully supportedFully supportedAccess via ArcGIS REST JSFully supportedFully supportedFully supported
MapBox GL JSAccess via ArcGIS REST JSAccess via ArcGIS REST JSAccess via ArcGIS REST JSAccess via ArcGIS REST JSAccess via ArcGIS REST JSNot supported
OpenLayersAccess via ArcGIS REST JSAccess via ArcGIS REST JSAccess via ArcGIS REST JSAccess via ArcGIS REST JSAccess via ArcGIS REST JSNot supported
ArcGIS REST JSFully supportedFully supportedFully supportedFully supportedFully supportedNot supported
Full supportPartial support (see notes)Not supported

Tools

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