Search widget with custom source

Explore in the sandboxView live

This sample demonstrates how to create a custom search source to use the with the search widget. The search widget provides the capability to provide search capabilities to third-party services. By default, the Search widget 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 use a custom source with the search widget, you must set the widget's sources property with your own custom source.

To create a custom search source, you need to construct a search source with on object containing two functions, getSuggestions and getResults.

In these two functions, you can determine how to return a list of suggestions to display in the search widget and how to obtain and return the results.

                                                                            
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
const customSearchSource = new SearchSource({
  placeholder: "example: 8 Boulevard du Port",
  // Provide a getSuggestions method
  // to provide suggestions to the Search widget
  getSuggestions: (params) => {
    // You can request data from a
    // third-party source to find some
    // suggestions with provided suggestTerm
    // the user types in the Search widget
    return esriRequest(url + "search/", {
      query: {
        q: params.suggestTerm.replace(/ /g, "+"),
        limit: 6,
        lat: view.center.latitude,
        lon: view.center.longitude
      },
      responseType: "json"
    }).then((results) => {
      // Return Suggestion results to display
      // in the Search widget
      return results.data.features.map((feature) => {
        return {
          key: "name",
          text: feature.properties.label,
          sourceIndex: params.sourceIndex
        };
      });
    });
  },
  // Provide a getResults method to find
  // results from the suggestions
  getResults: (params) => {
    // If the Search widget passes the current location,
    // you can use this in your own custom source
    const operation = params.location ? "reverse/" : "search/";
    let query = {};
    // You can perform a different query if a location
    // is provided
    if (params.location) {
      query.lat = params.location.latitude;
      query.lon = params.location.longitude;
    } else {
      query.q = params.suggestResult.text.replace(/ /g, "+");
      query.limit = 6;
    }
    return esriRequest(url + operation, {
      query: query,
      responseType: "json"
    }).then((results) => {
      // Parse the results of your custom search
      const searchResults = results.data.features.map((feature) => {
        // Create a Graphic the Search widget can display
        const graphic = new Graphic({
          geometry: new Point({
            x: feature.geometry.coordinates[0],
            y: feature.geometry.coordinates[1]
          }),
          attributes: feature.properties
        });
        // Optionally, you can provide an extent for
        // a point result, so the view can zoom to it
        const buffer = geometryEngine.geodesicBuffer(graphic.geometry, 100, "meters");
        // Return a Search Result
        const searchResult = {
          extent: buffer.extent,
          feature: graphic,
          name: feature.properties.label
        };
        return searchResult;
      });

      // Return an array of Search Results
      return searchResults;
    });
  }
});

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