This sample demonstrates how to search your data using the find task. The sample displays the results graphically on the map and in tabular format using a DojoX grid.
The FindTask constructor requires a URL to an ArcGIS Server map service. This example uses the ESRI_StatesCitiesRivers_USA service on the ESRI sample server.
findTask = new esri.tasks.FindTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer");
The FindParameters designate which layers and fields will be searched. If multiple layers contain the same field name (for example "NAME") both fields will be searched. Note that returnGeometry is set to true so that the results can be displayed on the map.
findParams = new esri.tasks.FindParameters(); findParams.returnGeometry = true; findParams.layerIds = [0,1,2]; findParams.searchFields = ["CITY_NAME","NAME","SYSTEM","STATE_ABBR","STATE_NAME"];
The searchText of the FindParameters is what the task will search for. This text comes from the input box and is sent to the execute function when you click the Find button. This line executes the task:
findTask.execute(findParams,showResults);
When the task finishes executing, the showResults function loops through the array of graphics in the FindResult and adds each graphic to the map. The function also adds attributes of each result to the grid.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>Find Task</title>
<style type="text/css">
@import "http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css";
@import "http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dojox/grid/resources/Grid.css";
body { font-size: 0.9em;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
.heading { font-weight: bold;
padding-bottom: 0.25em;
}
#grid { border: 1px solid #333;
width: 33em;
height: 30em;
}
</style>
<script type="text/javascript">djConfig={parseOnLoad:true}</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com//jsapi/arcgis/?v=1.6"></script>
<script type="text/javascript" language="Javascript">
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("esri.map");
dojo.require("esri.tasks.find");
var findTask, findParams, map;
function init() {
map = new esri.Map("map");
var censusMapLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer", {id:"usa"});
map.addLayer(censusMapLayer);
//create find task with url to map service
findTask = new esri.tasks.FindTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer");
//create find parameters and define known values
findParams = new esri.tasks.FindParameters();
findParams.returnGeometry = true;
findParams.layerIds = [0,1,2];
findParams.searchFields = ["CITY_NAME","NAME","SYSTEM","STATE_ABBR","STATE_NAME"];
}
function execute(searchText) {
//set the search text to find parameters
findParams.searchText = searchText;
findTask.execute(findParams,showResults);
}
function showResults(results) {
//symbology for graphics
var markerSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 1), new dojo.Color([0,255,0,0.25]));
var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255,0,0]), 1);
var polygonSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]));
//find results return an array of findResult.
map.graphics.clear();
var dataForGrid = [];
//Build an array of attribute information and add each found graphic to the map
dojo.forEach(results,function(result){
var graphic = result.feature;
dataForGrid.push([result.layerName,result.foundFieldName,result.value]);
switch (graphic.geometry.type) {
case "point":
graphic.setSymbol(markerSymbol);
break;
case "polyline":
graphic.setSymbol(lineSymbol);
break;
case "polygon":
graphic.setSymbol(polygonSymbol);
break;
}
map.graphics.add(graphic);
});
var data={
items:dataForGrid
};
var store = new dojo.data.ItemFileReadStore({data:data});
grid.setStore(store);
}
dojo.addOnLoad(init);
</script>
</head>
<body class="tundra">
<div class="heading">Find State/City/River: <input type="text" id="searchText" value="KS" />
<input type="button" value="Find" onclick="execute(dojo.byId('searchText').value);" /></div>
<div id="map" style="width:400px; height:300px; border:1px solid #000;"></div>
<!--Refer to field by the position id, since the data doesn't have field names-->
<table dojotype="dojox.grid.DataGrid" jsid="grid" id="grid" style="width:400px;">
<thead>
<tr>
<th field="0" width="125px">Layer Name</th>
<th field="1" width="125px">Field Name</th>
<th field="2" width="100%">Field Value</th>
</tr>
</thead>
</table>
</div>
</body>
</html>