Show Find Task results in Combobox

GlenReid · ‎01-07-2011

I took the code that Kelly wrote in this article on the ArcGIS Server Blog and updated it to use the latest API.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
 <meta name="generator" content="HTML Tidy, see www.w3.org">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>Populate dropdown list with unique values</title>
 <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css">
 <style type="text/css">body,html,#main{margin:0;padding:0;height:100%;width:100%;}</style>
 <script type="text/javascript">var djConfig = { parseOnLoad:true }</script>
 <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1"></script>

 <script type="text/javascript">
  dojo.require("esri.map");
  dojo.require("esri.tasks.query");
  dojo.require("dojo.parser");
  dojo.require("dijit.layout.BorderContainer");
  dojo.require("dijit.layout.ContentPane");
  dojo.require("dijit.form.ComboBox");
  dojo.require("dojo.data.ItemFileReadStore");

  var map;
  var resizeTimer;

  function init() {
   dojo.connect(dijit.byId('map'),'resize',function() { resizeMap(); });
   var queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_LandRecords_Louisville/MapServer/2");

   var query = new esri.tasks.Query();
   query.outFields = ["ZONING_TYPE"];
   query.returnGeometry = false;
   query.where  = "ZONING_TYPE <> ''";
   queryTask.execute(query,populateList);

   var initialExtent = new esri.geometry.Extent(-85.915,38.105,-85.52,38.33, new esri.SpatialReference({wkid:4326}));
   map = new esri.Map("map", {extent:initialExtent});
   map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));
   map.addLayer(new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_LandRecords_Louisville/MapServer",
    {"opacity":.4,"id":"dynamic"}));
  }

  function populateList(results) {
   // populate the dropdown list box with unique values
   var zone;
   var values = [];
   var testVals={};

   // add option to display all zoning types to the dropdown list
   values.push({name:"ALL"})

   var features = results.features;
   dojo.forEach (features, function(feature) {
    zone = feature.attributes.ZONING_TYPE;
    if (!testVals[zone]) {
     testVals[zone] = true;
     values.push({name:zone});
    }
   });

   var dataItems = {
    identifier: 'name',
    label: 'name',
    items: values
   };

   var store = new dojo.data.ItemFileReadStore({data:dataItems});
   dijit.byId("mySelect").store = store;
  }

  function applyLayerDef(selItem) {
   // filter the layer to display only the selected zoning types
   if (selItem.value !== 'ALL') {
    var layerDefs = [];
    layerDefs[2] = "ZONING_TYPE = " + "'" + selItem.value + "'";
    layerDefs.visibleLayers = [2];
    map.getLayer("dynamic").setLayerDefinitions(layerDefs);
   } else {
    map.getLayer("dynamic").setDefaultLayerDefinitions();
   }
  }

  function resizeMap() {
   // handle browser resize
   clearTimeout(resizeTimer);

   resizeTimer = setTimeout(function() {
    map.resize();
    map.reposition();
   }, 800);
  }
  dojo.addOnLoad(init);
 </script>
</head>
<body class="claro">
 <div id="main" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true">
  <div id="header" dojotype="dijit.layout.ContentPane" region="top" style="height:25px;">
   <select id="mySelect"
    dojotype="dijit.form.ComboBox"
    style="width:300px;font-size:18px;"
    autoComplete="true"
    forceValidOption="false"
    value="Select Zoning Type"
    onchange="applyLayerDef(this)">
   </select>
  </div>
  <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000;margin:5px"></div>
 </div>
</body>
</html>

This works fine as is, but it uses the distinct ZONING_TYPE for both the label and the value of the combobox.

Let's say I wanted to use the ZONING_CODE as the label and the ZONING_TYPE as the value -- I can't seem to figure out how to add this to the store.

Thanks,
Glen

HemingZhu · ‎01-07-2011

I took the code that Kelly wrote in this article on the ArcGIS Server Blog and updated it to use the latest API.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
 <meta name="generator" content="HTML Tidy, see www.w3.org">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>Populate dropdown list with unique values</title>
 <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css">
 <style type="text/css">body,html,#main{margin:0;padding:0;height:100%;width:100%;}</style>
 <script type="text/javascript">var djConfig = { parseOnLoad:true }</script>
 <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1"></script>

 <script type="text/javascript">
  dojo.require("esri.map");
  dojo.require("esri.tasks.query");
  dojo.require("dojo.parser");
  dojo.require("dijit.layout.BorderContainer");
  dojo.require("dijit.layout.ContentPane");
  dojo.require("dijit.form.ComboBox");
  dojo.require("dojo.data.ItemFileReadStore");

  var map;
  var resizeTimer;

  function init() {
   dojo.connect(dijit.byId('map'),'resize',function() { resizeMap(); });
   var queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_LandRecords_Louisville/MapServer/2");

   var query = new esri.tasks.Query();
   query.outFields = ["ZONING_TYPE"];
   query.returnGeometry = false;
   query.where  = "ZONING_TYPE <> ''";
   queryTask.execute(query,populateList);

   var initialExtent = new esri.geometry.Extent(-85.915,38.105,-85.52,38.33, new esri.SpatialReference({wkid:4326}));
   map = new esri.Map("map", {extent:initialExtent});
   map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));
   map.addLayer(new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_LandRecords_Louisville/MapServer",
    {"opacity":.4,"id":"dynamic"}));
  }

  function populateList(results) {
   // populate the dropdown list box with unique values
   var zone;
   var values = [];
   var testVals={};

   // add option to display all zoning types to the dropdown list
   values.push({name:"ALL"})

   var features = results.features;
   dojo.forEach (features, function(feature) {
    zone = feature.attributes.ZONING_TYPE;
    if (!testVals[zone]) {
     testVals[zone] = true;
     values.push({name:zone});
    }
   });

   var dataItems = {
    identifier: 'name',
    label: 'name',
    items: values
   };

   var store = new dojo.data.ItemFileReadStore({data:dataItems});
   dijit.byId("mySelect").store = store;
  }

  function applyLayerDef(selItem) {
   // filter the layer to display only the selected zoning types
   if (selItem.value !== 'ALL') {
    var layerDefs = [];
    layerDefs[2] = "ZONING_TYPE = " + "'" + selItem.value + "'";
    layerDefs.visibleLayers = [2];
    map.getLayer("dynamic").setLayerDefinitions(layerDefs);
   } else {
    map.getLayer("dynamic").setDefaultLayerDefinitions();
   }
  }

  function resizeMap() {
   // handle browser resize
   clearTimeout(resizeTimer);

   resizeTimer = setTimeout(function() {
    map.resize();
    map.reposition();
   }, 800);
  }
  dojo.addOnLoad(init);
 </script>
</head>
<body class="claro">
 <div id="main" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true">
  <div id="header" dojotype="dijit.layout.ContentPane" region="top" style="height:25px;">
   <select id="mySelect"
    dojotype="dijit.form.ComboBox"
    style="width:300px;font-size:18px;"
    autoComplete="true"
    forceValidOption="false"
    value="Select Zoning Type"
    onchange="applyLayerDef(this)">
   </select>
  </div>
  <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000;margin:5px"></div>
 </div>
</body>
</html>

This works fine as is, but it uses the distinct ZONING_TYPE for both the label and the value of the combobox.

Let's say I wanted to use the ZONING_CODE as the label and the ZONING_TYPE as the value -- I can't seem to figure out how to add this to the store.

Thanks,
Glen

I am not sure if you can do that unless the each zoning_type is unique. For a select element, the value in each option must be unique.