JSFiddle - React, Tailwind, and code Playground

by Thomas Upton

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/tundra/tundra.css">
<body class="tundra">
    <div id="select"></div>
    <button id="value">Log value</button>
</body>

CSS

body {
    margin: 10px;
    padding: 10px;
}

JavaScript

require([
    'dojo/store/Memory',
    'dojox/form/MultiComboBox',
    'dojo/data/ObjectStore',
    'dojo/on',
    'dojo/dom'
], function(Memory, MultiComboBox, DataStore, on, dom) {
    var memoryStore = new Memory({
        idProperty: "value",
        data: [
            {value: "AL", label: "Alabama"},
            {value: "AK", label: "Alaska"},
            {value: "AZ", label: "Arizona"},
            {value: "AR", label: "Arkansas"},
            {value: "CA", label: "California"},
            {value: "CO", label: "Colorado"},
            {value: "CT", label: "Connecticut"}
        ]
    });
    
    var dataStore = new DataStore({ 
        objectStore: memoryStore,
        // choose store property to display:
        labelProperty: "label" 
    });
    var widget = new dojox.form.MultiComboBox({
       store:dataStore,
       searchAttr:"label"
    }, "select");
    widget.startup();
    
    on(dom.byId('value'), 'click', function() {
        console.log(widget.getValue());
    });
});