dijit Filtering Select example

by syafid

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css">
<input id="stateSelect">
<p>
    <button onclick="alert(dijit.byId('stateSelect').get('value'))">Get value</button>
    <button onclick="alert(dijit.byId('stateSelect').get('displayedValue'))">Get displayed value</button>
</p>

JavaScript

require([
    "dojo/store/Memory", "dijit/form/FilteringSelect", "dojo/domReady!"
], function(Memory, FilteringSelect){
    var stateStore = new Memory({
        data: [
            {name:"Alabama", id:"AL", timeStamp:"1211753600"},
            {name:"Alaska", id:"AK", timeStamp:"1211753601"},
            {name:"American Samoa", id:"AS", timeStamp:"1211753602"},
            {name:"Arizona", id:"AZ", timeStamp:"1211753603"},
            {name:"Arkansas", id:"AR", timeStamp:"1211753604"},
            {name:"Armed Forces Europe", id:"AE", timeStamp:"1211753605"},
            {name:"Armed Forces Pacific", id:"AP", timeStamp:"1211753606"},
            {name:"Armed Forces the Americas", id:"AA", timeStamp:"1211753607"},
            {name:"California", id:"CA", timeStamp:"1211753608"},
            {name:"Colorado", id:"CO", timeStamp:"1211753609"},
            {name:"Connecticut", id:"CT", timeStamp:"1211753610"},
            {name:"Delaware", id:"DE", timeStamp:"1211753611"}
        ], idProperty: "timeStamp"
    });

    var filteringSelect = new FilteringSelect({
        id: "stateSelect",
        name: "state",
        value: "1211753605",
        store: stateStore,
        searchAttr: "name",
        identifier: "timeStamp"        
    }, "stateSelect").startup();
});