<script src="/upload/surveys/{SID}/files/jquery.easy-autocomplete.js"></script>
<link href="/upload/surveys/{SID}/files/easy-autocomplete.css" rel="stylesheet" />
 
<script type="text/javascript" data-author="Tony Partner">    
    $(document).on('ready pjax:scriptcomplete',function(){
 
        // Identify this question
        var thisQuestion = $('#question{QID}');
 
      
        // Define the data
        var fullData = [
{ 'e': "Acre", 'm': "Acrelândia" },
{ 'e': "Acre", 'm': "Assis Brasil" },
{ 'e': "Acre", 'm': "Brasiléia" },
...
{ 'e': "Alagoas", 'm': "Anadia" },
{ 'e': "Alagoas", 'm': "Arapiraca" },
{ 'e': "Alagoas", 'm': "Atalaia" },
{ 'e': "Alagoas", 'm': "Barra de Santo Antônio" },
{ 'e': "Alagoas", 'm': "Barra de São Miguel" },
...
{ 'e': "Tocantins", 'm': "Tupiratins" },
{ 'e': "Tocantins", 'm': "Wanderlândia" },
{ 'e': "Tocantins", 'm': "Xambioá" },
        ];
 
        // Define some elements and vars
        var keys = ['e', 'm'];
        var input1 = $('.answer-item:eq(0) input:text.form-control', thisQuestion);
        var inputs = {
            0: $('.answer-item:eq(0) input:text.form-control', thisQuestion),
            1: $('.answer-item:eq(1) input:text.form-control', thisQuestion),
        }
        var answers = {
            0: $.trim($(inputs[0]).val()),
            1: $.trim($(inputs[1]).val()),
        }
 
        // Create an array of "region" values
        var regions = ;
        $.each(fullData, function(i, val) {
            if(!regions.includes(val.e)) {
                regions.push(val.e);
            }
        });
 
        // Initiate autocomplete on the first input
        var aOptions1 = {
            data: regions,
            list: {
                maxNumberOfElements: 100,
                match: {
                    enabled: true
                },
                onChooseEvent: function() {
                    //If new selection...
                    if($.trim(inputs[0].val()) != answers[0]) {
                        answers[0] = $.trim(inputs[0].val());
                        // Reset following items
                        $('li.answer-item:gt(0) input:text', thisQuestion).val('').trigger('keyup').easyAutocomplete({ 'data': '' });
 
                        //Initiate autocomplete on next input
                        childAutocomplete(0);
                    }
                }
            }
        };
        inputs[0].easyAutocomplete(aOptions1);
 
        function childAutocomplete(index) {
            if((index+1) < $('li.answer-item', thisQuestion).length) {
                var parentInput = inputs[index];
                var nextInput = inputs[(index+1)];
 
                var key1 = keys[index];
                var key2 = keys[(index+1)];
 
              // Define the new data
                var thisFullData = fullData.filter(function(obj) {
                    return (obj[key1] == $.trim(parentInput.val()));
                });
                var thisData = ;
                $.each(thisFullData, function(i, val) {
                    if(!thisData.includes(val[key2])) {
                        thisData.push(val[key2]);
                    }
                });
 
                //Initiate autocomplete on next input
                var aOptions = {
                    data: thisData,
                    list: {
                        maxNumberOfElements: 100,
                        match: {
                            enabled: true
                        },
                        onChooseEvent: function() {
 
                            //If new selection...
                            if($.trim($(nextInput).val()) != answers[(index+1)]) {
                                answers[(index+1)] = $.trim($(nextInput).val());
                                // Reset following items
                                $('li.answer-item:gt('+index+1+') input:text', thisQuestion).val('').trigger('keyup').easyAutocomplete({ 'data': '' });
 
                                //Initiate autocomplete on next input
                                childAutocomplete(index+1);
                            }
                        }
                    }
                };
                nextInput.easyAutocomplete(aOptions);
            }
        }
 
        // Returning to page
        if($.trim(inputs[0].val()) != '') {
            childAutocomplete(0);
        }
    });
</script>