Drop down on search field

irtizahussain · ‎10-16-2018

How can i add the fields of my layer on search widget so that i just select the field name from drop down and search instead of write the name of the field !! Need help , is there any sample code for this

RobertScheitlin__GISP · ‎10-26-2018

That's why I asked what version you were using the other day.

<!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>Drop Down Test</title>
  <link rel="stylesheet" href="http://js.arcgis.com/4.9/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
  <script src="https://js.arcgis.com/4.9/"></script>
  <style>
    html,
    body,
    #mainWindow {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #FFF;
      overflow: hidden;
      font-family: "Trebuchet MS";
    }
    #header {
      height: 3%;
      overflow: auto;
    }
  </style>

  <script>
    var map;
    require([
      "esri/Map",
      "esri/views/MapView",
      "dojo/on",
      "esri/tasks/support/Query",
      "esri/layers/FeatureLayer",
      "dojo/store/Memory",
      "dojo/_base/array",
      "dojo/_base/lang",
      "esri/request",
      "dojo/parser",
      "dijit/registry",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dijit/form/Button",
      "dijit/form/ComboBox",
      "dojo/domReady!"
    ], function(
      Map, MapView, on, Query, FeatureLayer, Memory, array, lang, esriRequest, parser, registry
    ) {
      parser.parse();
      map = new Map({
        basemap: "topo"
      });

      var view = new MapView({
        container: "map",
        map: map,
        center: [-98.1883, 37.0868],
        zoom: 5
      });

      esriRequest('http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3/query?where=1%3D1&outF...',
      {
        responseType:'json',
        timeout:15000
      }).then(lang.hitch(this,function(response){
        var store2 = new Memory({data:[]});
        registry.byId("stateSelect").set('store',store2);
        var data = array.map(response.data.features,lang.hitch(this,function(feat, index){
          var name = feat.attributes.STATE_NAME;
          var value = feat.attributes.STATE_NAME;
          var dataItem = {
            id:index,
            name:name,
            value:value
          };
          return dataItem;
        }));
        store2 = new Memory({data:data});
        registry.byId("stateSelect").set('store',store2);
      }));

      var States = new FeatureLayer({
        url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3",
        outFields: ["*"]
      });

      var Counties = new FeatureLayer({
        url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2",
        outFields: ["*"]
      });

      //map.addMany([States,Counties]);

      app = {
        zoomRow: function(id, which){
          var sym = {
            type: "simple-fill",  // autocasts as new SimpleFillSymbol()
            color: [255, 0, 0, 0.5],
            outline: {  // autocasts as new SimpleLineSymbol()
              color: [128, 128, 128, 1],
              width: "0.5px"
            }
          }, gra;
          view.graphics.removeAll();
          var query = States.createQuery();
          var thePoly, theExtent;
          if(which == "State"){
            query.outFields=[];
            query.outSpatialReference = view.spatialReference;
            query.where = "STATE_NAME='" + (id).toString() + "'";
            console.info(query.where);
            query.returnGeometry = true;
            States.queryFeatures(query).then(function(response){
              gra = response.features[0];
              gra.symbol = sym;
              view.graphics.add(gra);
              thePoly = gra.geometry;
              theExtent = thePoly.extent.expand(2); //Zoom out slightly from the polygon's extent
              view.goTo(theExtent);
            });
            esriRequest("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2/query?where=STATE_NAME...'" + id.toString() + "'&outFields=NAME&returnGeometry=false&orderByFields=NAME&returnDistinctValues=true&f=json",
            {
              responseType: "json",
              timeout:15000
            }).then(lang.hitch(this,function(response){
              var store2 = new Memory({data:[]});
              registry.byId("countySelect").set('store',store2);
              var data = array.map(response.data.features,lang.hitch(this,function(feat, index){
                var name = feat.attributes.NAME;
                var dataItem = {
                  id:index,
                  name:name
                };
                return dataItem;
              }));
              store2 = new Memory({data:data});
              registry.byId("countySelect").set('store',store2);
              document.getElementById('countySelect').value = "Select County";
            }));
          }else if(which == "County"){
            query = Counties.createQuery();
            var county = (id).toString();
            county = county.replace(" County", "");
            query.where = "NAME='" + county + "'";
            query.returnGeometry = true;
            query.outFields=[];
            query.outSpatialReference = view.spatialReference;
            Counties.queryFeatures(query).then(function(response){
              gra = response.features[0];
              gra.symbol = sym;
              view.graphics.add(gra);
              thePoly = gra.geometry;
              theExtent = thePoly.extent.expand(2); //Zoom out slightly from the polygon's extent
              view.goTo(theExtent);
            });
          }
        }
      };

    });
  </script>
</head>

<body class="claro">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="padding:0px;margin:0px;">
    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="overflow:hidden;border:none;border-bottom: 3px solid #CC9900;font-family: Windows;font-size:14pt; color: #FFFFFF;background: #000000; "> Select a State/County and zoom to it on the map:
      <input id="stateSelect" data-dojo-type="dijit/form/ComboBox" value="Select State" onchange="app.zoomRow(document.getElementById('stateSelect').value, 'State');" data-dojo-props="maxHeight: 200" />
      <input id="countySelect" data-dojo-type="dijit/form/ComboBox" value="Select County" onchange="app.zoomRow(document.getElementById('countySelect').value, 'County');" />
      <input type="hidden" name="stateabbr" id="stateabbr" />
    </div>
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width:100%;height:95%;border:none;padding:0px;margin:0px;"></div>
  </div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎10-17-2018

Irtiza,

When do you have to type the field name into the search widget..? Normally you configure the search widgets sources and in the source you define the fields that will be searched and then the only thing you type into the search widgets input box is the search term.

irtizahussain · ‎10-23-2018

i want to make the search in a way where i don't have to type any thing i just select the fields and it search for me.It is same as drop down button works in html , unfortunately i have no idea how to implement this!!

RobertScheitlin__GISP · ‎10-24-2018

Irtiza,

Then the search widget is way to much for your needs. You just need to add a html select and on click have it execute a queryTask.

irtizahussain · ‎10-24-2018

As i'm a newbie i have no idea how to write such query!!

RobertScheitlin__GISP · ‎10-25-2018

Irtiza,

You talking 3.x or 4.x API?

RobertScheitlin__GISP · ‎10-25-2018

Here is a 3.x sample:

<!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>Drop Down Test</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.26/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.26/dojo/resources/dojo.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.26/esri/css/esri.css">
  <script src="http://js.arcgis.com/3.26/"></script>
  <style>
    html,
    body,
    #mainWindow {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #FFF;
      overflow: hidden;
      font-family: "Trebuchet MS";
    }
    #header {
      height: 3%;
      overflow: auto;
    }
  </style>

  <script>
    var map;
    require([
      "esri/map",
      "dojo/on",
      "esri/tasks/query",
      "esri/layers/FeatureLayer",
      "dojo/store/Memory",
      "dojo/_base/array",
      "dojo/_base/lang",
      "esri/request",
      "dojo/json",
      "dojo/parser",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dijit/form/Button",
      "dijit/form/ComboBox",
      "dojo/domReady!"
    ], function(
      Map, on, Query, FeatureLayer, Memory, array, lang, esriRequest, json, parser
    ) {
      parser.parse();
      map = new Map("map", {
        basemap: "topo",
        center: [-98.1883, 37.0868],
        zoom: 5
      });

      esriRequest({
        url: 'http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3/query?where=1%3D1&outF...',
        content:{
          f:'json'
        },
        handleAs:'json',
        callbackParamName:'callback',
        timeout:15000
      }).then(lang.hitch(this,function(response){
        var store2 = new Memory({data:[]});
        dijit.byId("stateSelect").set('store',store2);
        var data = array.map(response.features,lang.hitch(this,function(feat, index){
          var name = feat.attributes.STATE_NAME;
          var value = feat.attributes.STATE_NAME;
          var dataItem = {
            id:index,
            name:name,
            value:value
          };
          return dataItem;
        }));
        store2 = new Memory({data:data});
        dijit.byId("stateSelect").set('store',store2);
      }));

      var States = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3", {
        mode: FeatureLayer.MODE_SELECTION,
        outFields: ["*"]
      });

      var Counties = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2", {
        mode: FeatureLayer.MODE_SELECTION,
        outFields: ["*"]
      });

      map.addLayers([States,Counties]);

      app = {
        zoomRow: function(id, which){
          States.clearSelection();
          Counties.clearSelection();
          var query = new Query();
          var thePoly, theExtent;
          if(which == "State"){
            query.where = "STATE_NAME='" + (id).toString() + "'";
            console.info(query.where);
            query.returnGeometry = true;
            States.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (features) {
              thePoly = features[0].geometry;
              theExtent = thePoly.getExtent().expand(2); //Zoom out slightly from the polygon's extent
              map.setExtent(theExtent);
            });
            esriRequest({
              url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2/query?where=STATE_NAME...'" + id.toString() + "'&outFields=NAME&returnGeometry=false&orderByFields=NAME&returnDistinctValues=true&f=json",
              content:{
                f:'json'
              },
              handleAs:'json',
              callbackParamName:'callback',
              timeout:15000
            }).then(lang.hitch(this,function(response){
              var store2 = new Memory({data:[]});
              dijit.byId("countySelect").set('store',store2);
              var data = array.map(response.features,lang.hitch(this,function(feat, index){
                var name = feat.attributes.NAME;
                var dataItem = {
                  id:index,
                  name:name
                };
                return dataItem;
              }));
              store2 = new Memory({data:data});
              dijit.byId("countySelect").set('store',store2);
              document.getElementById('countySelect').value = "Select County";
            }));
          }else if(which == "County"){
            var county = (id).toString();
            county = county.replace(" County", "");
            query.where = "NAME='" + county + "'";
            console.info(query.where);
            query.returnGeometry = true;
            Counties.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (features) {
              thePoly = features[0].geometry;
              theExtent = thePoly.getExtent().expand(2); //Zoom out slightly from the polygon's extent
              map.setExtent(theExtent);
            });
          }
        }
      };

    });
  </script>
</head>

<body class="claro">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="padding:0px;margin:0px;">
    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="overflow:hidden;border:none;border-bottom: 3px solid #CC9900;font-family: Windows;font-size:14pt; color: #FFFFFF;background: #000000; "> Select a State/County and zoom to it on the map:
      <input id="stateSelect" data-dojo-type="dijit/form/ComboBox" value="Select State" onchange="app.zoomRow(document.getElementById('stateSelect').value, 'State');" data-dojo-props="maxHeight: 200" />
      <input id="countySelect" data-dojo-type="dijit/form/ComboBox" value="Select County" onchange="app.zoomRow(document.getElementById('countySelect').value, 'County');" />
      <input type="hidden" name="stateabbr" id="stateabbr" />
    </div>
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width:100%;height:95%;border:none;padding:0px;margin:0px;"></div>
  </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

irtizahussain · ‎10-25-2018

Robert Thanks for the help,

This is exactly what i want to do, thanks alot for this. The problem is my project is on 4.9 API version,code is not running when i change the version of this code. How can i convert the version of this code into 4.9 !!

RobertScheitlin__GISP · ‎10-26-2018

That's why I asked what version you were using the other day.

<!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>Drop Down Test</title>
  <link rel="stylesheet" href="http://js.arcgis.com/4.9/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
  <script src="https://js.arcgis.com/4.9/"></script>
  <style>
    html,
    body,
    #mainWindow {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #FFF;
      overflow: hidden;
      font-family: "Trebuchet MS";
    }
    #header {
      height: 3%;
      overflow: auto;
    }
  </style>

  <script>
    var map;
    require([
      "esri/Map",
      "esri/views/MapView",
      "dojo/on",
      "esri/tasks/support/Query",
      "esri/layers/FeatureLayer",
      "dojo/store/Memory",
      "dojo/_base/array",
      "dojo/_base/lang",
      "esri/request",
      "dojo/parser",
      "dijit/registry",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dijit/form/Button",
      "dijit/form/ComboBox",
      "dojo/domReady!"
    ], function(
      Map, MapView, on, Query, FeatureLayer, Memory, array, lang, esriRequest, parser, registry
    ) {
      parser.parse();
      map = new Map({
        basemap: "topo"
      });

      var view = new MapView({
        container: "map",
        map: map,
        center: [-98.1883, 37.0868],
        zoom: 5
      });

      esriRequest('http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3/query?where=1%3D1&outF...',
      {
        responseType:'json',
        timeout:15000
      }).then(lang.hitch(this,function(response){
        var store2 = new Memory({data:[]});
        registry.byId("stateSelect").set('store',store2);
        var data = array.map(response.data.features,lang.hitch(this,function(feat, index){
          var name = feat.attributes.STATE_NAME;
          var value = feat.attributes.STATE_NAME;
          var dataItem = {
            id:index,
            name:name,
            value:value
          };
          return dataItem;
        }));
        store2 = new Memory({data:data});
        registry.byId("stateSelect").set('store',store2);
      }));

      var States = new FeatureLayer({
        url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3",
        outFields: ["*"]
      });

      var Counties = new FeatureLayer({
        url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2",
        outFields: ["*"]
      });

      //map.addMany([States,Counties]);

      app = {
        zoomRow: function(id, which){
          var sym = {
            type: "simple-fill",  // autocasts as new SimpleFillSymbol()
            color: [255, 0, 0, 0.5],
            outline: {  // autocasts as new SimpleLineSymbol()
              color: [128, 128, 128, 1],
              width: "0.5px"
            }
          }, gra;
          view.graphics.removeAll();
          var query = States.createQuery();
          var thePoly, theExtent;
          if(which == "State"){
            query.outFields=[];
            query.outSpatialReference = view.spatialReference;
            query.where = "STATE_NAME='" + (id).toString() + "'";
            console.info(query.where);
            query.returnGeometry = true;
            States.queryFeatures(query).then(function(response){
              gra = response.features[0];
              gra.symbol = sym;
              view.graphics.add(gra);
              thePoly = gra.geometry;
              theExtent = thePoly.extent.expand(2); //Zoom out slightly from the polygon's extent
              view.goTo(theExtent);
            });
            esriRequest("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2/query?where=STATE_NAME...'" + id.toString() + "'&outFields=NAME&returnGeometry=false&orderByFields=NAME&returnDistinctValues=true&f=json",
            {
              responseType: "json",
              timeout:15000
            }).then(lang.hitch(this,function(response){
              var store2 = new Memory({data:[]});
              registry.byId("countySelect").set('store',store2);
              var data = array.map(response.data.features,lang.hitch(this,function(feat, index){
                var name = feat.attributes.NAME;
                var dataItem = {
                  id:index,
                  name:name
                };
                return dataItem;
              }));
              store2 = new Memory({data:data});
              registry.byId("countySelect").set('store',store2);
              document.getElementById('countySelect').value = "Select County";
            }));
          }else if(which == "County"){
            query = Counties.createQuery();
            var county = (id).toString();
            county = county.replace(" County", "");
            query.where = "NAME='" + county + "'";
            query.returnGeometry = true;
            query.outFields=[];
            query.outSpatialReference = view.spatialReference;
            Counties.queryFeatures(query).then(function(response){
              gra = response.features[0];
              gra.symbol = sym;
              view.graphics.add(gra);
              thePoly = gra.geometry;
              theExtent = thePoly.extent.expand(2); //Zoom out slightly from the polygon's extent
              view.goTo(theExtent);
            });
          }
        }
      };

    });
  </script>
</head>

<body class="claro">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="padding:0px;margin:0px;">
    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="overflow:hidden;border:none;border-bottom: 3px solid #CC9900;font-family: Windows;font-size:14pt; color: #FFFFFF;background: #000000; "> Select a State/County and zoom to it on the map:
      <input id="stateSelect" data-dojo-type="dijit/form/ComboBox" value="Select State" onchange="app.zoomRow(document.getElementById('stateSelect').value, 'State');" data-dojo-props="maxHeight: 200" />
      <input id="countySelect" data-dojo-type="dijit/form/ComboBox" value="Select County" onchange="app.zoomRow(document.getElementById('countySelect').value, 'County');" />
      <input type="hidden" name="stateabbr" id="stateabbr" />
    </div>
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width:100%;height:95%;border:none;padding:0px;margin:0px;"></div>
  </div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

irtizahussain · ‎10-29-2018

Robert Scheitlin, GISP‌ ooh thank u soo much , you save my life.Stay blessed