Hi everyone!
I have a question where I ask respondents about their contacts with other firms. I have a relatively large set of firms active in this sector (around 1900), and I am asking questions such as 'in which firms have you worked before'?
I would like to have an autocomplete question where the respondent can type in a few letters and be directed to the firm names that I have recorded (i.e., an autocomplete option). At the same time, I would like to give the respondent the possibility of choosing more than one firm among my list, and ideally to add the name of a firm that is not in my list. I would like each choice to be recorded as a separate answer, because I plan to build a network between firms and respondents.
I have tried the code mentioned in this thread, which works well for what I am trying to achieve, but does not work if one enables the 'multiple line' option in the text type.
https://community.qualtrics.com/XMcommunity/discussion/12/adding-autocomplete-javascript-to-my-survey/p1
It is a problem similar to the one posted here, but for the time being no solution has been suggested.
https://community.qualtrics.com/XMcommunity/discussion/19902/can-we-get-a-multi-select-option-for-autocomplete
Would anyone have a solution to this? AnthonyR your initial code looks like a very good basis for this! Maybe ahmedA or TimBednall who have also posted on this kind of questions before?
Thank you very much in advance!
Multiple-option autocomplete question
+2
+27Take a look at select2. It does exactly what you want. The potentially tricky part will be determining how to capture the addition of new firms in Qualtrics data.
+2Thank you TomG for your reply! I had looked at the guide you linked, but I am not sure on how to implement it in Qualtrics. Sorry for the basic question (I am definitely not a programmer), but I do not understand where I should include the two sets of commands referenced in that guide.
In other words, where should I use the following:
and where should I use this?
$(document).ready(function() {
$('.js-example-basic-multiple').select2();
});
Could you share an explanation similar to the one provided by AnthonyR at the link below?
https://community.qualtrics.com/XMcommunity/discussion/12/adding-autocomplete-javascript-to-my-surveyThank you so much!
+27+2Hi TomG , thank you for sharing that guide. I do not have the option of setting up my question as a Multi Select Box. These are the only options that I have:
I also have a second question: where am I supposed to insert the list of my pre-registered answers?
Thank you so much!
+27Qualtrics has made some changes since then, use this:
+2Thank you! Hopefully these are going to be my last two questions:
- Where should I include my list of possible answers? I can't find this in the thread you posted on the implementation of Select2
- I guess the easiest option to collect the names of additional firms would be to just ask a separate question. Do you agree?
Really appreciate your help!
+27https://community.qualtrics.com/XMcommunity/discussion/comment/50101#Comment_50101Your names would be the choices in the multiple choice question.
Yes, a separate question would be easiest. You could build your own select and use the 'tagging' feature then save the answers to a hidden question, but the JS is much more complex. Although, if you have too many choices (offhand, I don't remember the limit), you may end up building your own select anyway.
+2Dear TomG, thank you so much!
I have followed your directions and the question now works well.
I have a few troubleshooting problems to fix, however.
For example, when I feed it all the options I have, I get the following message in red:
How should I interpret this? Is this a suggestion, stating that the list may be too long for the respondent to scroll down (but this is solved thanks to Select2), or is this message telling me that 1900 options are too many for Qualtrics to handle?
The other problem I have is that, once this question is replied, the drop-down menu used in this question continues to appear on the following survey pages. This does not seem to be related to the number of options I include, as it also happens if I include few options. This does not always happen, and I am trying to figure out when this problem occurs. Sometimes, however, it does, which may be detrimental for getting responses. Again, here is a snapshot of what I see. Are you aware of a way to get rid of this problem? 
Thank you very much for your help, I massively appreciate it!
+27How should I interpret this? Is this a suggestion, stating that the list may be too long for the respondent to scroll down (but this is solved thanks to Select2), or is this message telling me that 1900 options are too many for Qualtrics to handle?
Actually, I'm not sure. Search for the last item in your list in the Select2 dropdown. If it is found, it is a warning. If not, your list got truncated and you'll have to use a different approach (i.e., create your own select).
The other problem I have is that, once this question is replied, the drop-down menu used in this question continues to appear on the following survey pages. This does not seem to be related to the number of options I include, as it also happens if I include few options. Again, here is a snapshot of what I see. Is there a way to get rid of this problem?
Yes, post your code (as a code block)
+2https://community.qualtrics.com/XMcommunity/discussion/comment/50142#Comment_50142Yep: I can see all my options, so I guess we can assume this is just a warning (fingers crossed!)
Here is the code I am using in my header:
This is the code I am using in my question
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
jQuery("#"+this.questionId+" select").select2();
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
+27https://community.qualtrics.com/XMcommunity/discussion/comment/50155#Comment_50155To format a code block, highlight the text, click the paragraph marker on the left, click the double quote, and select Code Block.
+2https://community.qualtrics.com/XMcommunity/discussion/comment/50157#Comment_50157Done, apologies for the confusion
+27I would use the last known stable version (not a release candidate):
Using that version, I don't have the issue you mentioned.
+2https://community.qualtrics.com/XMcommunity/discussion/comment/50160#Comment_50160Wonderful: it seems it works! I'll do some trials now, but thank you sooooo much for your help on this!
+2Hi TomG!
I found a problem with how this feature is visualised on a mobile. When one selects a number of answers, the dropdown window widens and gets too large to be visualized on a mobile screen (and it is not possible, so to speak, to 'move left').
You can see it in the screenshot below:
Is there any way to address this problem?
Thank you so much for your help on all of this!
+2Thank you very much TomG !
I have tried to set the width of the box, but it does not seem to work. Maybe I am getting something wrong with the syntax. I have written the following: did I get something wrong?
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
});
Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/
jQuery("#"+this.questionId+" select").select2();
});
$(".js-example-responsive").select2({
width: '50%' // need to override the changed default
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
Again, thank you so much for your help: really appreciated!
+27Try:
Qualtrics.SurveyEngine.addOnReady(function() {
jQuery("#"+this.questionId+" select").select2({width:'50%'});
});
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.