Hide Table of Contents
View Search multiple sources sample in sandbox
Search multiple sources

Description

This sample demonstrates how to use the Search widget to search on multiple types of input sources. The widget defaults to the ArcGIS Online World Geocoding Service. In addition to this, it is also set up to search on two additional feature layer's fields.

Code

<!DOCTYPE html>
<html dir="ltr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
  <title>ArcGIS API for JavaScript | Search widget with multiple sources</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.22/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">
  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    
    #search {
      display: block;
      position: absolute;
      z-index: 2;
      top: 20px;
      left: 74px;
    }
  </style>

  <script src="https://js.arcgis.com/3.22/"></script>
  <script>
    require([
      "esri/map", 
      "esri/dijit/Search", 
      "esri/layers/FeatureLayer",
      "esri/InfoTemplate", 
      "dojo/domReady!"
    ], function(Map, Search, FeatureLayer, InfoTemplate) {
      var map = new Map("map", {
        basemap: "gray",
        center: [-97, 38], // lon, lat
        zoom: 5
      });

      var search = new Search({
        enableButtonMode: true, //this enables the search widget to display as a single button
        enableLabel: false,
        enableInfoWindow: true,
        showInfoWindowOnSelect: false,
        map: map
      }, "search");

      var sources = search.get("sources");

      //Push the sources used to search, by default the ArcGIS Online World geocoder is included. In addition there is a feature layer of US congressional districts. The districts search is set up to find the "DISTRICTID". Also, a feature layer of senator information is set up to find based on the senator name. 

      sources.push({
        featureLayer: new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/CongressionalDistricts/FeatureServer/0"),
        searchFields: ["DISTRICTID"],
        displayField: "DISTRICTID",
        exactMatch: false,
        outFields: ["DISTRICTID", "NAME", "PARTY"],
        name: "Congressional Districts",
        placeholder: "3708",
        maxResults: 6,
        maxSuggestions: 6,

        //Create an InfoTemplate and include three fields
        infoTemplate: new InfoTemplate("Congressional District",
          "District ID: ${DISTRICTID}</br>Name: ${NAME}</br>Party Affiliation: ${PARTY}"
        ),
        enableSuggestions: true,
        minCharacters: 0
      });

      sources.push({
        featureLayer: new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/US_Senators/FeatureServer/0"),
        searchFields: ["Name"],
        displayField: "Name",
        exactMatch: false,
        name: "Senator",
        outFields: ["*"],
        placeholder: "Senator name",
        maxResults: 6,
        maxSuggestions: 6,

        //Create an InfoTemplate

        infoTemplate: new InfoTemplate("Senator information",
          "Name: ${Name}</br>State: ${State}</br>Party Affiliation: ${Party}</br>Phone No: ${Phone_Number}<br><a href=${Web_Page} target=_blank ;'>Website</a>"
        ),

        enableSuggestions: true,
        minCharacters: 0
      });

      //Set the sources above to the search widget
      search.set("sources", sources);

      search.startup();

    });
  </script>
</head>

<body>
  <div id="search"></div>
  <div id="map"></div>
</body>

</html>