Roxanne,
Here is a sample I created based on your question that should help get you going:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Select with feature layer</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.16/esri/css/esri.css">
<style>
html, body, #mapDiv {
padding: 0;
margin: 0;
height: 100%;
}
#messages{
background-color: #fff;
box-shadow: 0 0 5px #888;
font-size: 1.1em;
max-width: 15em;
padding: 0.5em;
position: absolute;
right: 20px;
top: 20px;
z-index: 40;
}
#search {
display: block;
position: absolute;
z-index: 2;
top: 20px;
left: 74px;
}
</style>
<script src="http://js.arcgis.com/3.16/"></script>
<script>
var map, userMP;
require([
"esri/map", "esri/layers/FeatureLayer", "dojo/_base/lang", "esri/dijit/Search", "dojo/on",
"esri/tasks/query", "esri/layers/GraphicsLayer",
"esri/graphic", "esri/InfoTemplate",
"esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer",
"esri/Color", "dojo/dom", "dojo/domReady!"
], function(
Map, FeatureLayer, lang, Search, on,
Query, GraphicsLayer,
Graphic, InfoTemplate,
SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer,
Color, dom
) {
map = new Map("mapDiv", {
basemap: "streets",
center: [-95.249, 38.954],
zoom: 10,
slider: false
});
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 = [];
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,
zoomScale: 300000,
//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();
search.set('value', 'Moran, Jerry');
var fillSymb = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_NULL,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SHORTDASHDOTDOT,
new Color([255, 0, 0]),
4
), new Color([255, 0, 0, 0])
);
on(search, "select-result", lang.hitch(this, function(rslt){
var query = new Query();
query.geometry = rslt.result.feature.geometry;
featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){
var rstr = "";
rstr += "Households: " + results[0].attributes.HOUSEHOLDS + "<br>";
rstr += "Household Units: " + results[0].attributes.HSE_UNITS + "<br>";
rstr += "2000 Population: " + results[0].attributes.POP2000;
dom.byId("messages").innerHTML = rstr;
});
}));
var featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/1",{
infoTemplate: new InfoTemplate("Block: ${BLKGRP}", "${*}"),
outFields: ["POP2000","HOUSEHOLDS","HSE_UNITS", "TRACT", "BLKGRP"]
});
featureLayer.setSelectionSymbol(fillSymb);
//make unselected features invisible
var nullSymbol = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_NULL,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_NULL,
new Color([255, 255, 0, 0]),
0
),
new Color([255, 255, 0, 0])
);
featureLayer.setRenderer(new SimpleRenderer(nullSymbol));
map.addLayer(featureLayer);
});
</script>
</head>
<body>
<div id="search"></div>
<span id="messages">Search by your Sentors name to find the Census block they are located in.</span>
<div id="mapDiv"></div>
</body>
</html>