Loading...

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

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.

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.

var customSearchSource = new SearchSource({
  name: "France Address Search",
  placeholder: "example: 8 Boulevard du Port",
  displayField: "name",
  // Provide a getSuggestions method
  // to provide suggestions to the Search widget
  getSuggestions: function(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(function(results) {
      // Return Suggestion results to display
      // in the Search widget
      return results.data.features.map(function(feature) {
        return {
          key: "name",
          text: feature.properties.label,
          sourceIndex: params.sourceIndex
        };
      });
    });
  },
  // Provide a getResults method to find
  // results from the suggestions
  getResults: function(params) {
    // If the Search widget passes the current location,
    // you can use this in your own custom source
    var operation = params.location ? "reverse/" : "search/";
    var 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(function(results) {
      // Parse the results of your custom search
      var searchResults = results.data.features.map(function(feature) {
        // Create a Graphic the Search widget can display
        var 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
        var buffer = geometryEngine.geodesicBuffer(graphic.geometry, 100, "meters");
        // Return a Search Result
        var searchResult = {
          extent: buffer.extent,
          feature: graphic,
          name: feature.properties.label
        };
        return searchResult;
      });

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

Sample search results

TitleSample
Loading...