dojo combo box select state full name but display state code - combobox

Question

Here is what I want to achieve - display state code when selecting a state full name. https://dojotoolkit.org/documentation/tutorials/1.10/selects_using_stores/demos/ProgFilteringSelect.html
But why I couldn't make it work? Here are the dojo codes and the state.json file.
dojo.xhrGet({url: datapath,
handleAs: dataformat,
load: function (result) {
require([
'dojo/store/Memory',
'dijit/form/ComboBox',
'dojo/domReady!'
], function (Memory, ComboBox) {
stateStore = new Memory({
idProperty: "code",
data: result.states.sort(function(a,b) {
var x = a.name.toLowerCase();
var y = b.name.toLowerCase();
return x < y ? -1 : x > y ? 1 : 0;
})
});
var cboState = new ComboBox({
id: 'usastate',
name: 'usastate',
style:{width: '100%', height: '35px', fontSize: '30px'},
placeholder: 'Select a State',
store: stateStore,
searchAttr: 'name',
autocomplete: true,
onChange: function(value) {
dom.byId('statecode').innerHTML = value;
}
});
cboState.placeAt(dom.byId('state')).startup();
});
}
});
"states": [
{
"name": "Alabama",
"abbreviation": "AL",
"code": "01"
},
{
"name": "Alaska",
"abbreviation": "AK",
"code": "02"
},
{
"name": "Arizona",
"abbreviation": "AZ",
"code": "03"
},
{
"name": "Arkansas",
"abbreviation": "AR",
"code": "04"
}

Answer 1

FilteringSelect worked. Not sure why Combo Box doesn't support it.
var cboState = new FilteringSelect({
id: 'usastate',
name: 'usastate',
style:{width: '100%', height: '35px', fontSize: '30px'},
placeholder: 'Select a State',
store: stateStore,
searchAttr: 'name',
autocomplete: true,
onChange: function(value) {
dom.byId("statecode").innerHTML = value;
dom.byId("statename").innerHTML = this.get("displayedValue");
}
});

Answer 2

You are setting the value of the HTML input element which should not be done here. Set the displayedValue attribute of the ComboBox in your onChange function.
var cboState = new ComboBox({
id: 'usastate',
name: 'usastate',
style:{width: '100%', height: '35px', fontSize: '30px'},
placeholder: 'Select a State',
store: stateStore,
searchAttr: 'name',
autocomplete: true,
onChange: function(value) {
this.set('displayedValue', value);
}
});