Laura,
Here is a sample that demos your request:
<!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.17/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.17/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.17/"></script>
<script>
require([
"esri/map", "esri/dijit/Search", "esri/layers/FeatureLayer", "esri/InfoTemplate", "dojo/query", "dojo/dom-attr", "dojo/domReady!"
], function(Map, Search, FeatureLayer, InfoTemplate, query, domAttr) {
var map = new Map("map", {
basemap: "gray",
center: [-97, 38], // lon, lat
zoom: 5
});
var search = new Search({
enableButtonMode: false, //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/FeatureServ..."),
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();
query(".searchMenu.sourcesMenu>ul>li").forEach(function(node, index) {
switch (index) {
case 0:
domAttr.set(node, "title", "All Source tooltip");
break;
case 1:
domAttr.set(node, "title", "ESRI World Geocoder tooltip");
break;
case 2:
domAttr.set(node, "title", "Congressional Districts tooltip");
break;
case 3:
domAttr.set(node, "title", "Senator tooltip");
break;
}
})
});
</script>
</head>
<body>
<div id="search"></div>
<div id="map"></div>
</body>
</html>