topic Re: Drop down on search field in ArcGIS JavaScript Maps SDK Questions

Drop down on search field

irtizahussain — Wed, 17 Oct 2018 06:28:33 GMT

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

Re: Drop down on search field

RobertScheitlin__GISP — Wed, 17 Oct 2018 12:37:04 GMT

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.

Re: Drop down on search field

irtizahussain — Wed, 24 Oct 2018 06:49:35 GMT

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!!

Re: Drop down on search field

RobertScheitlin__GISP — Wed, 24 Oct 2018 12:45:22 GMT

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.

Re: Drop down on search field

irtizahussain — Thu, 25 Oct 2018 03:56:19 GMT

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

Re: Drop down on search field

RobertScheitlin__GISP — Thu, 25 Oct 2018 14:24:11 GMT

Irtiza,

You talking 3.x or 4.x API?

Re: Drop down on search field

RobertScheitlin__GISP — Sat, 11 Dec 2021 21:13:43 GMT

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&outFields=STATE_NAME&returnGeometry=false&orderByFields=STATE_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("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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Drop down on search field

irtizahussain — Fri, 26 Oct 2018 04:30:55 GMT

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 !!

Re: Drop down on search field

RobertScheitlin__GISP — Sat, 11 Dec 2021 21:13:46 GMT

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&outFields=STATE_NAME&returnGeometry=false&orderByFields=STATE_NAME&returnDistinctValues=true&f=json',
      {
        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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Drop down on search field

irtizahussain — Mon, 29 Oct 2018 10:50:26 GMT

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

Re: Drop down on search field

irtizahussain — Mon, 03 Dec 2018 09:22:33 GMT

Hi again Robert Scheitlin, GISP‌ Sir can u tell me how can i add different widgets on this !! i tried many ways but still i can't succeed to perform this help me please.

Re: Drop down on search field

RobertScheitlin__GISP — Mon, 03 Dec 2018 14:12:51 GMT

Irtiza,

This question has been answered. You need to start a new question and include your code attempt to add a specific widget to the code.