Okay, assuming that you are using a clean version of Joffm's CSV (two columns, no duplicates) I would suggest:
- Use a multiple-short-text question with two sub-questions
- Hide the second sub-question
- Apply autocomplete to the first sub-question to load it with the location name (first CSV column)
- Use the select and change events to load the second sub-question with the location coordinates (second CSV column)
Then, you can use the value in the second sub-question as default coordinates for a map or elsewhere in the survey.
The script in the multiple-short-text question would be like this:
Code:
<link href="/upload/surveys/{SID}/files/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="/upload/surveys/{SID}/files/jquery-ui.min.js"></script>
<script src="/upload/surveys/{SID}/files/jquery.csv.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:complete',function() {
// Identify this question
var thisQuestion = $('#question{QID}');
// Hide the second input
$('.question-item:eq(1)', thisQuestion).hide();
var url = "/upload/surveys/{SID}/files/NAMES_cleaned.csv";
var Names = [];
var Coords = { };
$.get(url, function(data){
fullArray = $.csv.toArrays(data);
$(fullArray).each(function(i, item){
Names.push(item[0]);
Coords[item[0].toLowerCase()] = item[1];
});
// Initiate the Autocomplete plugin
$('input[type=text]:eq(0)', thisQuestion).autocomplete({
minLength: 2,
source: Names,
select: function(event, ui) {
$('input[type=text]:eq(1)', thisQuestion).val(Coords[ui.item.value.toLowerCase()].replace(/;/, ' '));
}
}).on('change', function(e) {
$('input[type=text]:eq(1)', thisQuestion).val(Coords[$.trim($(this).val()).toLowerCase()].replace(/;/, ' '));
});
});
});
</script>
Sample survey attached:
Cleaned CSV attached:
