I am using this example as my starting point: Dojo Bootstrap with ArcGIS JavaScript API - odoenet
I am not in a position to upgrade our servers to 10.3 to take advantage of including a featureLayer in my Search widget, at least not in time to meet my current deadline. I'm hoping this code will do the trick for now. It takes the text the enters and provides a list of suggestions based on what they've typed. Once they select an item. the map centers on it.
The user is likely to initiate a search while the map is still zoomed to the whole state, so I need it to both zoom and center. I'm not wrapping my head around how to modify this code to accomplish this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Auto Complete Find Example</title>
<link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.11/esri/css/esri.css">
<link rel="stylesheet" href="https://community.esri.com//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Example found at http://odoe.net/blog/dojo-bootstrap-with-arcgis-javascript-api/
-->
<style>
#map {
height: 500px;
}
#autocomplete {
position: fixed;
z-index: 99;
left: 75px;
top: 20px;
background-color: #fff;
padding: 10px;
border: 1px solid #e3e3e3;
}
</style>
<script>
var dojoConfig = {
packages: [{
name: "bootstrap",
location: "//rawgit.com/xsokev/Dojo-Bootstrap/master"
}]
};
</script>
<script src="http://js.arcgis.com/3.11/"></script>
</head>
<body>
<script type=text/javascript>
require([
'esri/map',
'dojo/query',
'bootstrap/Typeahead',
'esri/tasks/FindParameters',
'esri/tasks/FindTask',
'esri/layers/FeatureLayer',
'esri/graphicsUtils',
'dojo/domReady!'
], function(
Map, query, Typeahead,
FindParameters, FindTask,
FeatureLayer,
graphicsUtils
) {
var pathName = "https://ogitest.oa.mo.gov";
// var url = 'http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer';
var url = pathName + '/arcgis/rest/services/DSS/medProvider/MapServer';
var graphicsExtent = graphicsUtils.graphicsExtent;
var asFeatures = function asFeatures(data) {
return [data.feature];
};
var findResult = function findResult(results, item) {
return results.filter(function(x) {
return x.value === item;
}).shift();
};
var setExtent = function setExtent(map, features) {
return map.setExtent(features);
};
var map = new Map('map', {
center: [-92.593, 38.5],
zoom: 7,
basemap: 'topo'
});
var featureLayer = new FeatureLayer(url+"/0", {
id:'featureLayer',
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ['*']
});
map.addLayer(featureLayer);
map.on('load', function() {
var findTask = new FindTask(url);
var params = new FindParameters();
params.returnGeometry = true;
params.outSpatialReference = map.spatialReference;
params.layerIds = [0];
params.searchFields = ['NA_PROVIDER'];
var results;
var node = document.getElementById('search');
query(node).typeahead({
source: function(q, process) {
params.searchText = q;
findTask.execute(params).then(function(x) {
results = x;
process(x.map(function(a) {
return a.value;
}));
});
},
updater: function(x) {
setExtent(
map,
graphicsExtent(
asFeatures(findResult(results, x))
));
return x;
}
});
});
})
</script>
<div id="map">
<div id="autocomplete">
<label>Search For Provider:</label><br/>
<input id="search" type="text" class="span4"></input>
</div>
</div>
</body>
</html>
