this is really not the best solution.
1. States and cities in BRAZIL
2. A three level approach: region, province, city in Italy
Here the main parts of the script (of course, it is not my script; it was created from our javascript guru @tpartner)
Code:
<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>
