my code:
<html dir="ltr">
<link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
<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="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.14/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="http://js.arcgis.com/3.14/"></script>
<script>
require([
"esri/map", "esri/tasks/locator", "esri/graphic", "esri/dijit/Search", "esri/layers/FeatureLayer", "esri/InfoTemplate",
"esri/geometry/webMercatorUtils", "esri/layers/ArcGISTiledMapServiceLayer",
"esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
"esri/InfoTemplate", "esri/Color",
"dojo/number", "dojo/parser", "dojo/dom", "dijit/registry",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
], function (
Map, Locator, Graphic,Search,FeatureLayer, InfoTemplate,
webMercatorUtils, ArcGISTiledMapServiceLayer,
SimpleMarkerSymbol, SimpleLineSymbol,
InfoTemplate, Color,
number, parser, dom, registry
) {
var map = new Map("map", {
zoom: 5
});
var tiled = new ArcGISTiledMapServiceLayer("http://localhost:6080/arcgis/rest/services/Atlas2015/NEN_KTXH_150715/MapServer");
map.addLayer(tiled);
var locator = new Locator("http://localhost/arcgis/rest/services/Geocode/GEOCODING_SONHA_BH/GeocodeServer");
var s = 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 = s.get("sources");
sources.push({
locator: locator,
outFields: ["*"],
name: "Custom Geocoding Service",
placeholder: "Search Geocoder",
maxResults: 3,
maxSuggestions: 6,
enableSuggestions: true,
minCharacters: 3
});
sources.push({
featureLayer: new FeatureLayer("http://localhost/arcgis/rest/services/Atlas2015/NEN_KTXH_150715/MapServer/0"),
searchFields: ["*"],
displayField: "TEN",
exactMatch: true,
outFields: ["*"],
placeholder: "number house",
maxResults: 6,
maxSuggestions: 6,
//Create an InfoTemplate
infoTemplate: new InfoTemplate("tên: ${TEN}</br>địa chỉ: ${DIACHI}</br>"),
enableSuggestions: true,
minCharacters: 0
});
//Set the sources above to the search widget
s.set("sources", sources);
s.startup();
});
</script>
</head>
<body>
<div id="search"></div>
<div id="map"></div>
</body>
</html>
