Hi All,
I have added a Pick, Group and Rank type question in my survey but the choices to select from are huge. Is there a way using Javascript where I can add a search bar on the pick box to filter out the choices?
Hi All,
I have added a Pick, Group and Rank type question in my survey but the choices to select from are huge. Is there a way using Javascript where I can add a search bar on the pick box to filter out the choices?
Adding a search bar for choices | XM Community (qualtrics.com)
Hope this helps
If I understand correctly, you want a search box that filters the choices so that when you type something it hides all the choices that don’t match the search term.
I think it is possible to do with JS, but it would be quite complicated.
Yes, that is the exact requirement. Could you please provide some guidance around it?
Will something like below work for you, add it to the pick, group, rank question.
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
jQuery('.Items h2').append(' <input type="text" id="search-box" placeholder="Search...">');
var items = jQuery('.itemsContainerTd li')
jQuery('#search-box').on('input', function() {
var searchTerm = jQuery(this).val();
jQuery(items).each(function() {
const text = jQuery(this).text().toLowerCase();
if (text.includes(searchTerm)) {
jQuery(this).show();
} else {
jQuery(this).hide();
}
});
});
});
Hope it helps!
I have changed my questions to Multiple Choice now and using following JS for adding search option
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
---- in the look & feel header
var options = {placeholder: 'Select an option'};
jQuery("#"+this.questionId).find('select:first').select2({options});
---- in the question.
Thus this solution seems plausible to you or do you have any better suggestion?
If this works for you then that’s great. My code was more specific to Pick Group Rank question type which you have originally asked.
Kindly accept the answer if the code works, as it might be beneficial for others.
jQuery('.Items h2').append(' <input type="text" id="search-box" placeholder="Search...">');
jQuery('#search-box').on('input', function() {
var items = jQuery('.itemsContainerTd li');
var searchTerm = jQuery(this).val();
jQuery(items).each(function() {
const text = jQuery(this).text().toLowerCase();
if (text.includes(searchTerm)) {
jQuery(this).show();
} else {
jQuery(this).hide();
}
});
});
That’s a good tweak I just thought that if the choices are large and if a person forgets if something has already been grouped seeing that explicitly in grouped choices would clear the doubt instead of scrolling the group.
But yeah, thanks for the tweak!
Ahh that makes sense. Works well!
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.