Sample dstore population filter

popfilter.js

require([
  "dojo/_base/declare",
  "dojo/dom-construct",
  "dojo/number",
  "dijit/_WidgetBase",
  "dijit/_TemplatedMixin",
  "dstore/Memory",
  "esri/map",
  "esri/layers/FeatureLayer",
  "dojo/domReady!"
], function(
    declare, domConstruct, number, _WidgetBase, _TemplatedMixin,
    Memory,
    Map, FeatureLayer
) { 
  var map = new Map("map-div", {
    center: [-118, 34.5],
    zoom: 5,
    basemap: "topo"
  });
  
  var url = 'http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5';

  var template = '<div class="search-container">Minimum Pop:<div><input type="text" data-dojo-attach-point="search" data-dojo-attach-event="keyup:onFilter"></div><ul class="list-items"  data-dojo-attach-point="list"></ul></div>';
  // create the store
  var store = new Memory({
    data: [],
    idProperty: 'STATE_NAME'
  });
  
  var SearchList = declare([_WidgetBase, _TemplatedMixin], {
    templateString: template,
    postCreate: function() {
      this.set('filter', new this.store.Filter());
      this.store.on('add', function(item) {
        // create a filter to display all states
        var searchTerms = this.filter.gte('STATE_NAME', '');
        this.store.filter(searchTerms)
        .sort('STATE_NAME')
        .fetch() // fetch returns a promise
        .then(function(results) {
          this.update(results);
        }.bind(this));
      }.bind(this));
    },
    findTerm: function(term) {
      var pop = parseInt(term);
      if (isNaN(pop)) {
        pop = 0;
      }
      // gte = greater than or equal to
      var searchTerms = this.filter.gte('POP2007', pop);
      this.store.filter(searchTerms)
      .sort('STATE_NAME')
      .fetch()
      .then(function(results) {
        this.update(results);
      }.bind(this));
    },
    update: function(query) {
      // destroy the current list
      domConstruct.empty(this.list);
      // iterate results and update DOM
      query.forEach(function(item) {
        domConstruct.create('li', {
          innerHTML: item.STATE_NAME + '<span class="right">Pop: ' + number.format(item.POP2007) + '</span>'
        }, this.list);
      }.bind(this));
    },
    onFilter: function(e) {
      this.findTerm(this.search.value);
    }
  });
  var list = new SearchList({ store: store }, document.getElementById('filter-div'));
  var layer = new FeatureLayer(url, {
    outFields: ['*'],
    mode: FeatureLayer.MODE_SNAPSHOT // so all graphics passed at once
  });
  // when graphics get added, update the store
  layer.on('graphic-add', function(e) {
    store.add(e.graphic.attributes);
  });
  map.addLayer(layer);
  
});