I also think that you should be using a multiple-short-text type question.
To enforce selections from the list and to prevent duplicates, you can fire tests within the Autocomplete
change() and
select() events. Something like this:
Code:
<script type="text/javascript" src="{TEMPLATEURL}jquery.csv.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:complete',function() {
var url = "{TEMPLATEURL}kursnamen.csv";
var inputError = 'That is not a valid name';
var duplicateError = 'That is a duplicated name';
var Names = new Array();
$.get(url,function(data){
fullArray = $.csv.toArrays(data);
$(fullArray).each(function(i, item){
Names.push(item[0]);
});
$("#question{QID} input[type=text]").autocomplete({
source: Names,
select: function(event, ui) {
// Test for duplicates
var duplicates = false;
var inputValue = $.trim(ui.item.value);
$("#question{QID} input[type=text]").not($(this)).each(function(i) {
if($.trim($(this).val()) == inputValue) {
duplicates = true;
}
});
if(duplicates == true) {
flashError(this, duplicateError);
return false;
}
},
change: function(event, ui) {
// Test for value in list
if (!ui.item) {
this.value = '';
flashError(this, inputError);
}
$(this).trigger('keyup');
}
});
});
function flashError(el, errortext) {
var thisBackground = $(el).css('background-color');
$(el).css('background-color', 'pink').val(errortext);
setTimeout(function() {
$(el).css('background-color', thisBackground).val('').trigger('keyup');
}, 1500);
}
});
</script>
Regarding the variable-length-array plugin, something like this placed in the source of a multiple-short-text will have the same functionality:
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:complete',function() {
// A function to add or remove rows of a multiple-short-text question
function varLengthArray(qID) {
// The HTML content of the Add/Remove elements - modify as you wish
var addContent = '[+]';
var removeContent = '[-]';
// Insert the buttons
$('#question'+qID+' .subquestion-list').append('<div id="addButton'+qID+'" class="control-button">'+addContent+'</div><div id="removeButton'+qID+'" class="control-button">'+removeContent+'</div>');
// Style the elements - you can modify here if you wish
$('#question'+qID+' .control-button').css({
'margin':'10px 0 0 10px',
'padding':'1px',
'text-align':'center',
'font-weight':'bold',
'width':'auto',
'cursor':'pointer',
'float':'left'
});
// Initially hide the Remove element
$( 'div#removeButton'+qID ).hide();
// Call the functions below when clicked
$( 'div#addButton'+qID ).click(function (event) {
addRow(qID);
});
$( 'div#removeButton'+qID ).click(function (event) {
removeRow(qID);
});
// Function to add a row, also shows the Remove element and hides the
function addRow(qID) {
$('#question'+qID+' .answer-item:hidden:first').show();
$('div#removeButton'+qID).show();
if ($('#question'+qID+' .answer-item:visible').length == $('#question'+qID+' .answer-item').length) {
$('div#addButton'+qID).hide();
}
}
// Function to remove a row and clear the input value
function removeRow(qID) {
$('#question'+qID+' .answer-item:visible:last').hide();
$('#question'+qID+' .answer-item:hidden input[type="text"]').each(function(i) {
$(this).val('').trigger('keyup');
});
$( 'div#addButton'+qID ).show();
if ($('#question'+qID+' .answer-item:visible').length == 1) {
$('div#removeButton'+qID).hide();
}
}
// Just some initialization stuff
// Initially hide all except first row or any rows with populated inputs
$('#question'+qID+' .answer-item input[type="text"]:not(:first)').each(function(i) {
if($.trim($(this).val()) == '') {
$(this).closest('.answer-item').hide();
}
if ($('#question'+qID+' .answer-item:visible').length > 1) {
$('div#removeButton'+qID).show();
}
});
}
// Call the function with a question ID
varLengthArray({QID});
});
</script>
Here is your sample survey with the question type changed and both of those scripts applied:
