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.

var customSearchSource = new SearchSource({
  placeholder: "example: 8 Boulevard du Port",
  // 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,
      responseType: "json"
    }).then(function(results) {
      // Return Suggestion results to display
      // in the Search widget
      return {
        return {
          key: "name",
          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) { = 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 = {
        // 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]
        // 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,
        return searchResult;

      // Return an array of Search Results
      return searchResults;