develop/jsapi/search_with_query_task/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Search with Query Task</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.1/esri/css/main.css">
  
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>

  <script src="https://js.arcgis.com/4.1/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/tasks/QueryTask",
      "esri/tasks/support/Query",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/core/watchUtils",
      "dojo/on",
      "dojo/dom",
      "dojo/domReady!"
    ], function(Map, MapView, FeatureLayer, QueryTask, Query, SimpleMarkerSymbol, watchUtils, on, dom) {

      var map = new Map({
        basemap: "dark-gray-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-122.68, 45.52], // lon, lat
        zoom: 10
      });

      // Create query task to reference the PDX_Rail_Stops_Styled feature layer      
      var queryTask = new QueryTask({
        url: "http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/PDX_Rail_Stops_Styled/FeatureServer/0"
      });

      // Only return three fields
      var query = new Query({
        returnGeometry: true,
        outFields: ["STATION", "LINE", "TYPE"],
        where: ""
      });

      // Perform query when page loads
      getFeatures("TYPE = 'MAX'");

      // Get features with sql clause
      function getFeatures(sql) {
        query.where = sql;
        queryTask.execute(query).then(function(results) {
          if (!view.ready) {
            watchUtils.whenTrueOnce(view, "ready", function() {
              addFeatures(results.features);
            })
          } else {
            addFeatures(results.features);
          }
        });
      }

      // Add features as graphics
      function addFeatures(features) {
        var color,
          symbol;
        // Color
        switch (features[0].attributes.TYPE) {
          case "MAX":
            color = [237, 81, 81]
            break;
          case "CR":
            color = [167, 198, 54]
            break;
          case "SC":
            color = [20, 158, 206]
            break;
        }
        symbol = new SimpleMarkerSymbol({
          color: color,
          size: 8,
          outline: {
            color: [ 255, 255, 255 ],
            width: 1
          }
        });
        // Set symbol and popup template
        for (var i=0; i < features.length; i++) {
          var feature = features[i];
          feature.symbol = symbol;
          feature.popupTemplate = {
            title: "{STATION}",
            content: "This is a {TYPE} rail stop for the {LINE} line."
          }
          view.graphics.add(feature);
        }
        // Add graphics
        view.graphics.removeAll();
        view.graphics.addMany(features);
        view.goTo(features);
        view.popup.visible = false;
      }

      // Add select element to UI
      view.ui.add(dom.byId("queryDiv"), {
        position: "top-right"
      });

      // Select a sql query
      on(dom.byId("queryDiv"), "change", function(e) {
        var sql = e.target.value;
        getFeatures(sql);
      })
      
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
  <select id="queryDiv">
    <option selected>TYPE = 'MAX'</option>
    <option>TYPE = 'CR'</option>
    <option>TYPE = 'SC'</option>
  </select>
</body>
</html>