Hide Table of Contents
View Find features without a map sample in sandbox
Find features without a map

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_FIPS fields of the States layer (index 2).

params = new esri.tasks.FindParameters();params.layerIds = [2];params.searchFields = ["STATE_NAME","STATE_FIPS"];

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>Simple Find</title>

    <script src="https://js.arcgis.com/3.22/"></script>
    <script>
      dojo.require("esri.tasks.find");

      var find, params;
      function init() {
        find = new esri.tasks.FindTask("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/");
        params = new esri.tasks.FindParameters();
        params.layerIds = [2];
        params.searchFields = ["STATE_NAME","STATE_FIPS"];
      }

      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>FIPS</td><td>Population (1990)</td><td>Population (1999)</td></tr></thead><tbody id=\"states\">"];
        dojo.forEach(results,function(result){
          attribs = result.feature.attributes;
           s.push("<tr><td>" + attribs.STATE_NAME + "</td><td>" + attribs.STATE_FIPS + "</td><td>" + attribs.POP1990 + "</td><td>" + attribs.POP1999 + "</td></tr>");
        });
        s.push("</tbody></table>");
        dojo.byId("tbl").innerHTML = s.join("");
      }

      dojo.ready(init);
    </script>

  </head>
  <body class="claro">
    Find by State Name or State FIPS: <input type="text" id="searchText" size="40" value="Kansas" />
    <input type="button" value="Find" onclick="doFind()" />
    <div id="tbl"></div>
  </body>
</html>