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
Explore in the sandbox
Open in CodePen
View live sample
Description
This sample demonstrates how to use the find task to search for records in your data, then display the results in an HTML table.
Although the FindTask does not require you to display a map, its constructor requires a URL to an ArcGIS Server map service. FindParameters restricts the search to only the state_name and state_abbr fields of the States layer (index 2).
params = new esri.tasks.FindParameters();
params.layerIds = [2];
params.searchFields = ["state_name","state_abbr"];
When you click the Find button, the function doFind reads the input box and uses it as the search text. The find is then executed:
params.searchText = dojo.byId("searchText").value;
find.execute(params, showResults);
The results are returned as an array of FindResult objects. These are graphics, which have attributes that you can retrieve through syntax such as result.feature.attributes.STATE_NAME. After the find task completes, the callback function showResults loops through these features and constructs an HTML table from their attributes. The function then writes the table to the "tbl" div.
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>Basic FindTask</title>
<script src="https://js.arcgis.com/3.46/"></script>
<script>
dojo.require("esri.tasks.find");
var find, params;
function init() {
find = new esri.tasks.FindTask("https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/");
params = new esri.tasks.FindParameters();
params.layerIds = [2];
params.searchFields = ["state_name","state_abbr"];
}
function doFind() {
params.searchText = dojo.byId("searchText").value;
find.execute(params, showResults);
}
function showResults(results) {
var result, attribs;
var s = ["<table border=\"1\"><thead><tr style=\"background-color:#ccc;\"><td>State Name</td><td>State abbreviation</td><td>Population (2000)</td></tr></thead><tbody id=\"states\">"];
dojo.forEach(results,function(result){
// Note: Find return the "alias" field names
attribs = result.feature.attributes;
s.push("<tr><td>" + attribs.STATE_NAME + "</td><td>" + attribs.STATE_ABBR + "</td><td>" + attribs.POP2000 + "</td></tr>");
});
s.push("</tbody></table>");
dojo.byId("tbl").innerHTML = s.join("");
}
dojo.ready(init);
</script>
</head>
<body class="claro">
Find a U.S. state by name or abbreviation: <input type="text" id="searchText" size="40" value="CA" />
<input type="button" value="Find" onclick="doFind()" />
<div id="tbl"></div>
</body>
</html>