Hide Table of Contents
Analysis
Data Reviewer
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Search multiple sources
Explore in the sandbox
Open in CodePen
View live sample
Download as a zip file
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.29/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/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.29/"></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>