Esri Javascript API Query & Combo 3.2

Query and combo box

by Alex Azuero

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.4/dijit/themes/claro/claro.css">
<!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/3.2/js/esri/css/esri.css" />
        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.7.4/dijit/themes/claro/claro.css" />
        <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>
    </head>

    <body class="claro">
        <div id="mySelect" data-dojo-type="dijit.form.ComboBox"/>
    </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

require(["dojo/parser", "dojo/ready", "dojo/dom", "dojo/dom-construct", "esri/main", "esri/dijit/Attribution", "dijit/form/ComboBox", "dojo/data/ItemFileReadStore", "dojo/_base/array", "dijit/registry"],

function(parser, ready, dom, domConstruct, esri, Attribution, ComboBox, ItemFileReadStore, array, registry) {

    ready(function() {

        parser.parse();

        var populateList = function(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;
            array.forEach(features, function(feature) {
                zone = feature.attributes.ZONING_TYPE;
                if (zone) {
                    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 ItemFileReadStore({
                data: dataItems
            });
            registry.byId("mySelect").set('store', store);
        }

        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.returnGeometry = false;
        query.outFields = ["ZONING_TYPE"];
        query.where = "ZONING_TYPE<> ''";
       ...