So here is what I did ......
1) Create the CSV file with the following fields
Make and Model
Make
Model
Make and Model Code
Make Code
so it looked like this ...
Alfa Romeo 4C, Alfa Romeo, 4C, 1, 1
Alfa Romeo Giulietta, Alfa Romeo, Giulietta, 2, 1
Alfa Romeo Mito, Alfa Romeo, Mito, 3, 1,
Aston Martin DB9, Aston Martin, DB9, 4, 2,
Aston Martin DBS ,Aston Martin, DBS, 5 2
Then I created a multiple choice with comments question that had 5 responses
Response 1 -
First alternative car make and model (please start by typing the make and select the relevant make and model) - Shown to the respondent
Responses 2-4
Make
Model
Make Model Code
Make Code
Hidden from respondents in CSS .... these were used for logic later in the survey and to punch into single choice questions for analysis
Then in the source code of the question I added the following ....
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var url = 'https://serveraddress/lookup/models.csv';
// Create an array to hold the names
var namesArr = new Array();
// Grab the CSV contents
$.get(url,function(data){
// Convert CSV contents to an array of arrays
fullArray = $.csv.toArrays(data);
// Load the names array
$(fullArray).each(function(i, item){
namesArr.push(item[0]);
});
// Initialise the autocomplete plugin
$('#answer635652X501X13198Acomment.text').autocomplete({
source: namesArr,
// Event fired when a selection is made (ui.item.value refers to the selected item)
select: function(event, ui) {
// Find the "relevant make and model" values associated with the selected name value and load those questions
$(fullArray).each(function(i, item){
if(item[0] == ui.item.value) {
$('#answer635652X501X13198Ccomment.text').val(item[1]);
$('#answer635652X501X13198Dcomment.text').val(item[2]);
$('#answer635652X501X13198Ecomment.text').val(item[3]);
$('#answer635652X501X13198Fcomment.text').val(item[4]);
}
});
}
});
});
});
</script>
As you can see from this the first section loads the first column from the CSV to the autocomplete
/ Initialise the autocomplete plugin
$('#answer635652X501X13198Acomment.text').autocomplete({
The the following section fills out the remaining hidden fields
$(fullArray).each(function(i, item){
if(item[0] == ui.item.value) {
$('#answer635652X501X13198Ccomment.text').val(item[1]);
$('#answer635652X501X13198Dcomment.text').val(item[2]);
$('#answer635652X501X13198Ecomment.text').val(item[3]);
$('#answer635652X501X13198Fcomment.text').val(item[4]);
}
Finally in the template file I included the jquery-ui autocomplete script I think this is in LS by default if not you can get it from the JQuery-UI website ...
<script type="text/javascript" src="{TEMPLATEURL}js/jquery-ui/jquery.ui.autocomplete.min.js"></script>
That worked for me ... hope this helps you out ...
The topic has been locked.