function populateDropDownList(){ var queryTask = new QueryTask(educationLayer.url + "/3"); var query = new Query(); query.outFields = ["DIST_NAME"]; query.where = "1=1"; query.returnGeometry = false; queryTask.on('complete', resultsHandler); queryTask.on('error', errorHandler); queryTask.execute(query); } function resultsHandler(results){ select = registry.byId("distSelect");// a dijit.form.Select districtList.length = 0; var numResults = results.featureSet.features.length; for (var j = 0; j < numResults; j++) { var distName = results.featureSet.features.attributes.DIST_NAME; //note the attribute name for the district code is DIST_CODE districtList.push(distName); } districtList.sort(); var testList = arrayUtil.map(districtList, function (item, index){ return { label:item, value:item }; }); select.addOption(testList); }
Solved! Go to Solution.
var dataStore = new Memory({data:districtList, idProperty:"value"})
var stateStore = new Memory({ data: [ {name:"Alabama", id:"AL"}, {name:"Alaska", id:"AK"}, {name:"American Samoa", id:"AS"}, {name:"Arizona", id:"AZ"}, {name:"Arkansas", id:"AR"} ] });
districtList.push({name: distName, id: distCode});
<select id="distSelect" data-dojo-type="dijit/form/FilteringSelect" data-dojo-props="title:'Find schools in selected district',maxHeight:200, size: 30, labelAttr:'label', searchAttr:'label'"> <option>Pick a district</option> </select>
function resultsHandler(results){ var select = registry.byId("distSelect"); districtList.length = 0; var numResults = results.featureSet.features.length; for (var j = 0; j < numResults; j++) { var distName = results.featureSet.features.attributes.DIST_NAME; var distCode = results.featureSet.features .attributes.DIST_CODE; districtList.push({label: distName, value: distCode}); } districtList.sort(function(item1, item2) { var label1 = item1.name.toLowerCase(), label2 = item2.name.toLowerCase(); return (label1 > label2) ? 1 : (label1 < label2) ? -1 : 0; }); var dataStore = new Memory({data:districtList, idProperty:"value"}) select.set ("store", dataStore); select.set ("labelAttr", "label"); select.set ("searchAttr", "value"); // select.addOption(districtList); console.log (districtList); }
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Select</title> <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.7/js/dojo/dojo/resources/dojo.css" /> <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css"> <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/document.css" /> <style> html, body, .dijitBorderContainer { width: 100%; height: 100%; margin: 0; overflow:hidden; } </style> </head> <body class="claro"> <select id="distSelect" data-dojo-type="dijit/form/FilteringSelect" data-dojo-props="title:'Find schools in selected district',maxHeight:200, size: 30, labelAttr:'label', searchAttr:'label',autoComplete:false,queryExpr:'*${0}*',placeHolder:'Pick a District'"> </select> </body> <script type="text/javascript"> var dojoConfig = { async: true, parseOnLoad:true }; </script> <script src="http://js.arcgis.com/3.7/"></script> <script type="text/javascript"> require(["dojo/_base/declare", "dojo/ready", "dijit/registry", "dijit/form/Button", "dijit/form/FilteringSelect", "dojo/store/Memory"], function (declare, ready, registry, Button, FilteringSelect, Memory) { //fire when dojo is "ready" ready(function () { //create a distric list var districtList = [ { label: "District One", value: "Dist 1" }, { label: "District Two", value: "Dist 2" }, { label: "District Three", value: "Dist 3" }, { label: "District Four", value: "Dist 4" } ]; //add a button var button = new Button({ label: "Populate Select", onClick: function () { //get the filteringselect var select = registry.byId("distSelect"); //set the select's store using the districtlist select.set("store", new Memory({ data: districtList, idProperty: "value" })); } }); button.placeAt(document.body); }); }); </script> </html>
queryExpr:'*${0}*'