Hello Ricardo, If it is possible to use Multiple Text entry questions instead of 1 Form Field question, you will be able to use the autocomplete feature available. 

Hello @TusharDalwani!

Thank you for your response. 

In this case we need a form field because we have around 8 fields that the user has to fill, in this scenario, 8 individual text entry questions would use a lot of space. 

 Also we have around 10 similar surveys that my team have to build, so using this aproach would be very time consuming. 

Hi, I went through that thread and made a couple tweaks to the solution I found in one of the comments there. The idea is that an input field is hidden and a select element is inserted in its place. Then the text value of whatever is selected gets set as the value for the hidden input field.

To give it a try, create a Form Field question type and give it 3 fields. Then to change the 3rd field into a dropdown with 5 answer options, add the below to the question's JavaScript in the OnReady section:

var that=this.questionId;
var pipe3 = this.getTextValue(3);
var element="<select id='s3'><option></option><option value='Entry 1'>Entry 1</option><option value='Entry 2'>Entry 2</option><option value='Entry 3'>Entry 3</option><option value='Entry 4'>Entry 4</option><option value='Entry 5'>Entry 5</option></select>";
jQuery(element).insertAfter("#"+that+" .InputText:eq(2)");

jQuery("#"+that+" .InputText:eq(2)").hide().val(pipe3);
jQuery("#s3").val(pipe3);

var select3 = document.getElementById("s3");
select3.addEventListener('input', function (event) {
jQuery("#"+that+" .InputText:eq(2)").val(jQuery("#s3 option:selected").text());
}, false);

You might also check out using select2 to make searchable dropdowns. There’s a post on it here. Just remove the parts about multiple: true and make some of the tweaks I made above with pipe3 to support the back button.

Hello @Tom_1842!

It worked perfectly! thank you :D 

Something else (that now I see that I should have added to the question ) we also need to show/hide some of the options with display logics. But when I do that, the drop down list is not hided, it is just added to the third option. Here an example: 

I put the logic to Field 3 and when the logic is met, this is what I see: 

But when the logic is not met, this is what I see: 

Field 3 is not shown but the drop-down list is appliet to Field 4. 

Also, when I respond the survey the drop-down values are assigned to the question that it is related to in each scenario. 

Is there a way to fix this? 

Thanks!

Try using the below instead. It selects the form to be hidden based on ID instead of index of InputText.

var that=this.questionId;
var form3 = document.getElementById("QR~"+that+"~3");
var pipe3 = this.getTextValue(3);
var element="<select id='s3'><option></option><option value='Entry 1'>Entry 1</option><option value='Entry 2'>Entry 2</option><option value='Entry 3'>Entry 3</option><option value='Entry 4'>Entry 4</option><option value='Entry 5'>Entry 5</option></select>";
jQuery(element).insertAfter(form3);

jQuery(form3).hide().val(pipe3);
jQuery("#s3").val(pipe3);

var select3 = document.getElementById("s3");
select3.addEventListener('input', function (event) {
jQuery(form3).val(jQuery("#s3 option:selected").text());
}, false);

@Ricmarug,

You might be interested in the formSelects function.  It makes it very easy to convert form fields to drop downs without custom JavaScript.  It supports multiple dropdowns in a form, searchable dropdowns (select2), user entered options, and multi-select dropdowns.

Thank you very much, @Tom_1842. It worked perfectly!!

Best regards, 

Hi @Tom_1842 - This is quite cool! A follow-up question - 

Say we want to replicate the same dropdown options in all 3 form fields, how would the code change? I tried something but seem to be woefully offbase 

var that=this.questionId;
var pipe3 = this.getTextValue(3);
var element="<select id='s3'><option></option><option value='Entry 1'>Entry 1</option><option value='Entry 2'>Entry 2</option><option value='Entry 3'>Entry 3</option><option value='Entry 4'>Entry 4</option><option value='Entry 5'>Entry 5</option></select>";
jQuery(element).insertAfter("#"+that+" .InputText:eq(2)");

jQuery("#"+that+" .InputText:eq(2)").hide().val(pipe3);
jQuery("#s3").val(pipe3);

var select3 = document.getElementById("s3");
select3.addEventListener('input', function (event) {
jQuery("#"+that+" .InputText:eq(2)").val(jQuery("#s3 option:selected").text());
}, false);

@ninadas Try creating a new Form Field question that has 3 fields. Then add the below to the OnReady section of the question’s JavaScript:

var qid=this.questionId;

var form1 = document.getElementById("QR~"+qid+"~1");
var pipe1 = this.getTextValue(1);
var form2 = document.getElementById("QR~"+qid+"~2");
var pipe2 = this.getTextValue(2);
var form3 = document.getElementById("QR~"+qid+"~3");
var pipe3 = this.getTextValue(3);

var element1="<select id='s1'><option></option><option value='Entry 1'>Entry 1</option><option value='Entry 2'>Entry 2</option><option value='Entry 3'>Entry 3</option><option value='Entry 4'>Entry 4</option><option value='Entry 5'>Entry 5</option></select>";

var element2="<select id='s2'><option></option><option value='Entry 1'>Entry 1</option><option value='Entry 2'>Entry 2</option><option value='Entry 3'>Entry 3</option><option value='Entry 4'>Entry 4</option><option value='Entry 5'>Entry 5</option></select>";

var element3="<select id='s3'><option></option><option value='Entry 1'>Entry 1</option><option value='Entry 2'>Entry 2</option><option value='Entry 3'>Entry 3</option><option value='Entry 4'>Entry 4</option><option value='Entry 5'>Entry 5</option></select>";

jQuery(element1).insertAfter(form1);
jQuery(element2).insertAfter(form2);
jQuery(element3).insertAfter(form3);

jQuery(form1).hide().val(pipe1);
jQuery("#s1").val(pipe1);
jQuery(form2).hide().val(pipe2);
jQuery("#s2").val(pipe2);
jQuery(form3).hide().val(pipe3);
jQuery("#s3").val(pipe3);

var select1 = document.getElementById("s1");
var select2 = document.getElementById("s2");
var select3 = document.getElementById("s3");

select1.addEventListener('input', function (event) {
jQuery(form1).val(jQuery("#s1 option:selected").text());
}, false);

select2.addEventListener('input', function (event) {
jQuery(form2).val(jQuery("#s2 option:selected").text());
}, false);

select3.addEventListener('input', function (event) {
jQuery(form3).val(jQuery("#s3 option:selected").text());
}, false);

Thank you so much, @Tom_1842 ! This worked well!

Hello @Tom_1842 ,

I recently added a drop down to a form field question in my Qualtrics with minor adjustments to fit our use case. It worked perfectly for the last month or so but today I received a “We were unable to connect to our servers. Please check your internet connection and try again.” Qualtrics support center believes that something with my Java Script has been done in error but cannot provide any guidance on how to troubleshoot. I am unsure why today it would stop working when I have been using it for some time. Anyone have thoughts on why this may be the case? 

Thanks in advance for the guidance!

Hello! I am unable to use the javascript for a dropdown field in formfield this is my first time using javascript how can i know if my javascript is working I don’t see any changes after pasting the given code above can someone please explain if any changes to be made in javascript code  with example. Thanks in Advance