Esri Javascript API Query & Combo 2.8

Query and combo box 2.8

by Alex Azuero

HTML

<!doctype html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
        <title>ArcGIS JavaScript API Fiddle</title>
        <link rel="stylesheet" href="//serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css" />
                   <script type="text/javascript">
                var dojoConfig = {
                  parseOnLoad: true
                };
            </script>
        <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>
 
    </head>

    <body class="claro">
        <select id="mySelect" dojoType="dijit.form.ComboBox"</select>
    </body>
</html>

CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 100% !important; /* fixes IE issue exaggerated text resizing*/
    line-height: 1.4;
}

JavaScript

dojo.require("esri.map");
dojo.require("esri.tasks.query");
dojo.require("dojo.parser");
dojo.require("dijit.form.ComboBox");
dojo.require("dojo.data.ItemFileReadStore");


function populateList(results) {
    //Populate the ComboBox with unique values
    var zone;
    var values = [];
    var testVals = {};
    //Add option to display all zoning types to the ComboBox
    values.push({
        name: "ALL"
    })

    //Loop through the QueryTask results and populate an array
    //with the unique values
    var features = results.features;
    dojo.forEach(features, function(feature) {
        zone = feature.attributes.ZONING_TYPE;
        if (!testVals[zone]) {
            testVals[zone] = true;
            values.push({
                name: zone
            });
        }
    });
    //Create a ItemFileReadStore and use it for the
    //ComboBox's data source
    var dataItems = {
        identifier: 'name',
        label: 'name',
        items: values
    };
    var store = new dojo.data.ItemFileReadStore({
        data: dataItems
    });
    dijit.byId("mySelect").set('store', store);
}

function init() {
    queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_LandRecords_Louisville/MapServer/2");
    query = new esri.tasks.Query();
    query.returnGeometry = false;
    query.outFields = ["ZONING_TYPE"];
    query.where = "ZONING_TYPE<> ''";
    queryTask.execute(query, populateList);
}
dojo.addOnLoad(init);