<script type="text/javascript" src="{TEMPLATEURL}jquery.csv.js"></script>

<script type="text/javascript" charset="utf-8">
 
  $(document).ready(function() {
 
    // Define the CSV filename
    var csvName = 'linguas.csv';
 
    // Define some paths
    var surveyRoot = location.pathname.split('index.php')[0];
    var templateName = $('head link[href*="template.css"]').attr('href').replace(/\/template.css/, '').split('/templates/')[1];
    var templatePath = surveyRoot+'upload/templates/'+templateName+'/';
 
    // Define the questions
    var q1ID = '{QID}';  
    var q1 = $('#question'+q1ID);
    var q2 = $(q1).nextAll('.text-short:eq(0)');
    var q3 = $(q1).nextAll('.text-short:eq(1)');
 
    // Define the path to the CSV
    var url = templatePath+csvName;
 
    // Create an array to hold the CSV rows
    var namesArr = new Array();
 
    // Grab the CSV contents
    $.get(url,function(data){
 
      // Convert CSV contents to an array of arrays
      fullArray = jQuery.csv()(data);
 
      // Load the CSV rows array
      $(fullArray).each(function(i, item){
        namesArr.push(item[0]);
      });
 
      // Initialise the autocomplete plugin
      $('input.text', q1).autocomplete({
        source: namesArr,
        // Event fired when a selection is made (ui.item.value refers to the selected item)
        select: function(event, ui) { 
          // Find the column 2 and column 3 values associated with the selected column 1 value and load q2 and q3
          $(fullArray).each(function(i, item){
            if(item[0] == ui.item.value) {
              // The value from column 2 of the CSV
              $('input.text', q2).val(item[1]);
              // The value from column 3 of the CSV
              $('input.text', q3).val(item[2]);
            }
          }); 
        }
 
      });
    });
  });
</script>