Search box to search layers

by Alex Azuero

HTML

<!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.16/dijit/themes/claro/claro.css">
   <link rel="stylesheet" href="https://js.arcgis.com/3.16/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>
<script src="https://js.arcgis.com/3.16/"></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"),
           ...