Find | Sample | ArcGIS Maps SDK for JavaScript

Skip to content

This sample demonstrates how to use find to search for records in a map service, then display the results in an HTML table.

Although find does not require you to display a map, it requires a URL to an ArcGIS Server map service. FindParameters restricts the search to only the areaname field of the Cities layer (index 0).

params = new FindParameters();
params.layerIds = [0];
params.searchFields = ["areaname"];

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 = document.getElementById("searchText").value;
find.find(findUrl, params).then(showResults).catch(rejectedPromise);

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.AREANAME. After find completes, the callback function showResults() loops through these features and constructs an HTML table from their attributes.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Find | Sample | ArcGIS Maps SDK for JavaScript</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }

      td {
        padding: 4px;
      }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

    <script type="module">
      const [find, FindParameters] = await $arcgis.import([
        "@arcgis/core/rest/find.js",
        "@arcgis/core/rest/support/FindParameters.js",
      ]);

      const calciteLoader = document.getElementById("calciteLoader");

      // Create a URL pointing to a map service
      const findUrl = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer";

      // Set parameters to only query the Counties layer by name
      const params = new FindParameters({
        layerIds: [0],
        searchFields: ["areaname"],
      });

      // Executes on each button click
      function doFind() {
        // Display loading gif to provide the user feedback on search progress
        calciteLoader.hidden = false;
        // Set the search text to the value of the input box
        params.searchText = document.getElementById("inputTxt").value;
        // The find() performs a LIKE SQL query based on the provided text value
        // showResults() is called once the promise returned here resolves
        find.find(findUrl, params).then(showResults).catch(rejectedPromise);
      }

      const resultsTable = document.getElementById("tbl");

      // Executes when the promise from find.execute() resolves
      function showResults(response) {
        const results = response.results;

        // Clear the cells and rows of the table to make room for new results
        resultsTable.textContent = "";

        // If no results are returned from the find, notify the user
        if (results.length === 0) {
          resultsTable.innerHTML = "<i>No results found</i>";
          calciteLoader.hidden = true;
          return;
        }

        // Set up row for descriptive headers to display results
        let topRow = resultsTable.insertRow(0);
        let cell1 = topRow.insertCell(0);
        let cell2 = topRow.insertCell(1);
        let cell3 = topRow.insertCell(2);
        let cell4 = topRow.insertCell(3);
        cell1.innerHTML = "<b>City Name</b>";
        cell2.innerHTML = "<b>State Abbreviation</b>";
        cell3.innerHTML = "<b>Population (2000)</b>";
        cell4.innerHTML = "<b>Is state capital?</b>";

        // Loop through each result in the response and add as a row in the table
        results.forEach(function (findResult, i) {
          // Get each value of the desired attributes
          const city = findResult.feature.attributes["AREANAME"];
          const state = findResult.feature.attributes["ST"];
          const pop2000 = findResult.feature.attributes["POP2000"];
          const capital = findResult.feature.attributes["CAPITAL"];

          // Add each resulting value to the table as a row
          const row = resultsTable.insertRow(i + 1);
          let cell1 = row.insertCell(0);
          let cell2 = row.insertCell(1);
          let cell3 = row.insertCell(2);
          let cell4 = row.insertCell(3);
          cell1.textContent = city;
          cell2.textContent = state;
          cell3.textContent = pop2000;
          cell4.textContent = capital;
        });
        calciteLoader.hidden = true;
      }

      // Executes each time the promise from find.execute() is rejected.
      function rejectedPromise(error) {
        console.error("Promise didn't resolve: ", error.message);
      }

      // Run doFind() when button is clicked
      document.getElementById("findBtn").addEventListener("click", doFind);
    </script>
  </head>
  <body>
    <div class="esri-widget">
      Use find on a Map Service to view the population and other information by city name. <br />
      <br />
      Find by City Name:
      <input type="text" id="inputTxt" size="40" value="New" />
      <input type="button" value="Find" id="findBtn" />
      <calcite-loader
        id="calciteLoader"
        label="loading"
        type="indeterminate"
        hidden="true"></calcite-loader>
      <table id="tbl"></table>
    </div>
  </body>
</html>