When using autocomplete on a text input, it is tricky to force a selection from the data set.
Given the relatively small data set (145 items), I would be inclined to use drop-downs and add searching with the Select2 platform -
Code:
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script type="text/javascript" data-author="Tony Partner">
$(document).on('ready pjax:scriptcomplete',function(){
// Identify this question
var thisQuestion = $('#question{QID}');
// Index the array columns
$('table.subquestion-list tr', thisQuestion).each(function(i) {
$('> *', this).each(function(i) {
$(this).attr('data-index', i);
});
});
// Define the dropdown
var select1 = '<select class="form-select form-control list-question-select inserted-select">\
<option value="">Please choose...</option>\
<option value="A1">Apples</option>\
<option value="A2">Bananas</option>\
<option value="A3">Cherries</option>\
<option value="A4">Dates</option>\
<option value="A5">Limes</option>\
<option value="A6">Nectarines</option>\
<option value="A7">Plumbs</option>\
<option value="A8">Elderberries</option>\
<option value="A9">Lemons</option>\
<option value="A10">Peaches</option>\
<option value="A11">Blueberries</option>\
<option value="A12">Grapes</option>\
</select>'
// Define the placeholder text for the select2 search input
var placeholder = 'Type here to search the dropdown';
// Hide the column-1 text inputs
$('.answer-item[data-index="1"] :text', thisQuestion).addClass('d-none');
// Insert the column-1 dropdowns
$('.answer-item[data-index="1"]', thisQuestion).append(select1);
// Listener on the dropdowns
$('.inserted-select', thisQuestion).on('change', function(e) {
var thisCell = $(this).closest('.answer-item');
$(':text', thisCell).val($(this).val()).trigger('keyup');
});
// Returning to the page
$('.inserted-select', thisQuestion).each(function(i) {
var thisCell = $(this).closest('.answer-item');
$(this).val($(':text', thisCell).val());
});
// Initiate the select2 search function
$('.inserted-select', thisQuestion).select2();
$('.inserted-select', thisQuestion).on('select2:open', function(e) {
document.querySelector('.select2-search__field').focus();
$('input.select2-search__field').prop('placeholder', placeholder);
});
// A function to add or remove rows of an Array (Multi Flexible)(Text) question
function varLengthArray(thisQuestion) {
if ($(thisQuestion).length > 0) {
// The HTML content of the Add/Remove elements - modify as you wish
var addContent = '[+] Add row';
var removeContent = '[-] Remove row';
// The classes for the Add/Remove elements - modify as you wish
// See https://getbootstrap.com/docs/5.0/getting-started/introduction/
var addClasses = 'inserted-button add btn btn-success';
var removeClasses = 'inserted-button remove btn btn-danger';
// The styles for the Add/Remove elements - modify as you wish
// These could be placed in your custom.css file.
var addStyles = 'margin:10px 0 10px 10px; padding:1px 5px; text-align:center; width:auto; cursor:pointer; float:left;';
var removeStyles = 'margin:10px 0 10px 10px; padding:1px 5px; text-align:center; width:auto; cursor:pointer; float:left;';
// Insert the buttons
$( 'table.ls-answers', thisQuestion).after('<div class="button-wrapper">\
<button type="button" class="'+addClasses+'" style="'+addStyles+'">'+addContent+'</button>\
<button type="button" class="'+removeClasses+'" style="display: none; '+removeStyles+'">'+removeContent+'</button>\
</div>');
// Listeners on the buttons
$('.inserted-button.add', thisQuestion).on('click', function (event) {
addRow();
});
$('.inserted-button.remove', thisQuestion).on('click', function (event) {
removeRow();
});
// Define the relevant rows
var relevantRows = $('tr.subquestion-list:not(.ls-irrelevant)', thisQuestion);
// Function to add a row, show the "Remove" element and hide the "Add" element if all rows are shown
function addRow() {
$('[data-visible="false"]:first', thisQuestion).attr('data-visible', 'true').show();
$('.inserted-button.remove', thisQuestion).show();
if ($('[data-visible="false"]', thisQuestion).length == 0) {
$('.inserted-button.add', thisQuestion).hide();
}
$('.inserted-button.add', thisQuestion).blur();
handleAddButton();
}
// Function to remove a row, clear the contents of the removed row,
// show the "Add" element if the last row is hidden and hide the "Remove" element if only the first row is shown
function removeRow() {
$('[data-visible="true"]:last input:text', thisQuestion).val('').trigger('keyup');
$('[data-visible="true"]:last select', thisQuestion).val('');
$('[data-visible="true"]:last', thisQuestion).attr('data-visible', 'false').hide();
$('.inserted-button.add', thisQuestion).show();
if ($('[data-visible="true"]', thisQuestion).length == 0) {
$('.inserted-button.remove', thisQuestion).hide();
}
$('.inserted-button.remove', thisQuestion).blur();
handleAddButton();
}
// Initially hide all except first row or any rows with populated inputs
$(relevantRows).slice(1).each(function(i) {
$( this ).attr('data-visible', 'false').hide();
$('input[type=text]', this).each(function(i) {
if ($.trim($(this).val()) != '') {
$(this).closest('tr').attr('data-visible', 'true').show();
$('.inserted-button.remove', thisQuestion).show();
}
});
});
}
// Function handle the "Add row" button
function handleAddButton() {
var lastRow = $('tr[id^="javatbd"]:visible:last', thisQuestion);
var emptyInputs = $(':text.form-control', lastRow).filter(function() {
return $.trim($(this).val()) == '';
});
if(emptyInputs.length > 0) {
$('.inserted-button.add', thisQuestion).prop('disabled', true);
}
else {
$('.inserted-button.add', thisQuestion).prop('disabled', false);
}
}
// Initial "Add row" state
handleAddButton();
// Listeners for the "Add row" state
$(':text.form-control, .inserted-select', thisQuestion).on('keyup change', function(e) {
handleAddButton();
});
}
// Call the function with a question ID
varLengthArray(thisQuestion);
});
</script>
Topic Author
