Adding a search Bar

@Vinay_Bohra You can check this post for answer
Adding a search bar for choices | XM Community (qualtrics.com)

Hope this helps

@TomG can you help with this?

@Vinay_Bohra,

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.

@TomG 
Yes, that is the exact requirement. Could you please provide some guidance around it?

@Deepak this is really helpful!

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?

@Vinay_Bohra 

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. 

@Deepak this is great, thank you! I just have 1 tweak to put the var items =  jQuery('.itemsContainerTd li') underneath the input function. This makes it so that only items that have not yet been put into a Group will be filtered. When it is above, the items that have been placed in Groups are also filtered. So updated JS below:

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();
                    }
                });
});

@Tom_1842 

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!