FilteringSelect not working second time

Question

I have the below in the test file. What i am trying is to write the selected value from filteringselect to divid. For the first time its is working correctly, but for the next time the filtering is not happening(No value is available in the drop down). For the first change of filteringselect the onchange is called successfully.

Please assist me to find the issue. I am new to dojo. DOJO Version - DOJO 1.8

<script>
    require([
        "dojo/store/Memory", "dijit/form/FilteringSelect", "dojo/domReady!"
    ], function(Memory, FilteringSelect){
        var stateStore = new Memory({
            data: [
                {name:"Alabama", id:"AL"},
                {name:"Alaska", id:"AK"},
                {name:"American Samoa", id:"AS"},
                {name:"Arizona", id:"AZ"},
                {name:"Arkansas", id:"AR"},
                {name:"Armed Forces Europe", id:"AE"},
                {name:"Armed Forces Pacific", id:"AP"},
                {name:"Armed Forces the Americas", id:"AA"},
                {name:"California", id:"CA"},
                {name:"Colorado", id:"CO"},
                {name:"Connecticut", id:"CT"},
                {name:"Delaware", id:"DE"}
            ]
        });

        var filteringSelect = new FilteringSelect({
            id: "stateSelect",
            name: "state",
            placeHolder: "Select a State",
            store: stateStore,
            searchAttr: "name",
            onChange: function(value) {
                var text1 = document.getElementById("divid").innerHTML
                document.getElementById("divid").innerHTML = text1 + dijit.byId('stateSelect').attr('displayedValue') + ';';
            }
        }, "stateSelect");
    });
</script>

<div id="divid">
    Select a State : <input id="stateSelect">
</div>

Answer 1

Your error is due to the way you log your output:

var text1 = document.getElementById("divid").innerHTML;
document.getElementById("divid").innerHTML = text1 + [...]

Since 'divid' contains the FilteringSelect dijit markup, setting again divid.innerHTML overwrites the existing DOM and messes up the existing FilteringSelect dijit instance. In general, you should not modify the DOM of a dijit instance. Just add an empty span element to your markup to log your values:

<div id="divid">
Select a State : <input id="stateSelect">
<span id="buffer"></span>
</div>

and onChange becomes :

onChange: function(value){
var text1 = document.getElementById("buffer").innerHTML;
document.getElementById("buffer").innerHTML = text1 + [...]
}