Hide Table of Contents
Analysis
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 using a suggestion template
Explore in the sandbox
Open in CodePen
View live sample
Description
This sample demonstrates how you can work with a suggestion template when using the Search widget. At 3.14, a constructor option was added to thesource. The suggestionTemplate option allows the search box to display a string template with multiple fields based on user's input. In this particular example, we are searching based on a parcel owner's name.The resulting suggestions display the parcel id and address for the specified owner name.
Suggestions are available if working with a 10.3 geocoding service that has suggest capability loaded or a 10.3 feature layer that supports pagination, i.e. supportsPagination = true. Also, if using the Esri locator, suggest does not have an option to return a number of suggestions. The following property allows you to verify that a feature layer supports pagination.
featureLayer.advancedQueryCapabilities.supportsPagination === true
Code
<!DOCTYPE html>
<html>
<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>Search with Suggestion Template</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.46/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.46/"></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-vector",
center: [-82.93, 42.5], // lon, lat
zoom: 9
});
var search = new Search({
sources: [{
featureLayer: new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/US_Senators_2020/FeatureServer/0", {
outFields: ["*"],
infoTemplate: new InfoTemplate("Senators", "Senator name: ${Name}</br>Party: ${Party}</br>Address: ${Address}")
}),
outFields: ["Name","Party","Address"],
displayField: "Name",
suggestionTemplate: "${Name}",
name: "Senators",
placeholder: "example: Brown",
enableSuggestions: true
}],
map: map
}, "search");
search.startup();
});
</script>
</head>
<body>
<div id="search"></div>
<div id="map"></div>
</body>
</html>