Given your JSON object as the fullData variable, you don't need any extra AJAX calls. After answering the second autocomplete input, you can find the corresponding row in the full data (as an object) and load values directly from that into the "fixed" inputs.
Code:
<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 = [
{ "make":"ABARTH","model":"124","makemodel":"ABARTH 124","type1":"1","type2":"0","type3":"0","type4":"0","type5":"0","type6":"0" },
{ "make":"ABARTH","model":"SPIDER","makemodel":"ABARTH 500","type1":"1","type2":"0","type3":"0","type4":"0","type5":"1","type6":"0" },
{ "make":"ABARTH","model":"500","makemodel":"ABARTH 595","type1":"1","type2":"0","type3":"0","type4":"0","type5":"0","type6":"0" },
{ "make":"ABARTH","model":"595","makemodel":"ABARTH 695","type1":"1","type2":"0","type3":"0","type4":"0","type5":"0","type6":"0" },
{ "make":"ABARTH","model":"695","makemodel":"ABARTH F595","type1":"1","type2":"0","type3":"0","type4":"0","type5":"0","type6":"0" },
{ "make":"ABARTH","model":"F595","makemodel":"ABARTH PUNTO","type1":"1","type2":"0","type3":"0","type4":"0","type5":"0","type6":"0" },
{ "make":"ABARTH","model":"PUNTO","makemodel":"ABARTH SPIDER","type1":"1","type2":"0","type3":"0","type4":"0","type5":"0","type6":"0" },
{ "make":"ACURA","model":"CL","makemodel":"ACURA CL","type1":"1","type2":"0","type3":"0","type4":"0","type5":"0","type6":"0" },
{ "make":"ACURA","model":"MDX","makemodel":"ACURA MDX","type1":"1","type2":"0","type3":"0","type4":"0","type5":"0","type6":"0" },
{ "make":"ACURA","model":"RL","makemodel":"ACURA RL","type1":"1","type2":"0","type3":"0","type4":"0","type5":"0","type6":"0" },
{ "make":"ACURA","model":"TL","makemodel":"ACURA TL","type1":"1","type2":"0","type3":"0","type4":"0","type5":"0","type6":"0" }
];
// Define some elements and vars
var keys = ['make', 'model'];
var inputs = $('.answer-item input:text.form-control', thisQuestion);
var answers = {
0: $.trim($(inputs[0]).val()),
1: $.trim($(inputs[1]).val())
}
// Create an array of "make" values
var makes = [];
$.each(fullData, function(i, val) {
if(!makes.includes(val.make)) {
makes.push(val.make);
}
});
// Initiate autocomplete on the first input
var aOptions1 = {
data: makes,
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');
$('li.answer-item:eq(1) input:text', thisQuestion).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');
// Load the fixed items
var dataRow = fullData.filter(function(obj) {
return (obj[key1] == $.trim(parentInput.val()) && obj[key2] == $.trim(nextInput.val()));
})[0];
console.log(dataRow);
// NOTE: This could be done with a loop but with only 7 items it's safer to hard-code it
$(inputs[2]).val(dataRow.makemodel);
$(inputs[3]).val(dataRow.type1);
$(inputs[4]).val(dataRow.type2);
$(inputs[5]).val(dataRow.type3);
$(inputs[6]).val(dataRow.type4);
$(inputs[7]).val(dataRow.type5);
$(inputs[8]).val(dataRow.type6);
}
}
}
};
nextInput.easyAutocomplete(aOptions);
}
}
// Returning to page
if($.trim($(inputs[0]).val()) != '') {
childAutocomplete(0);
}
});
</script>
Topic Author
