Custom javascript/jquery autocomplete field shows up on the next page | XM Community
Question

Custom javascript/jquery autocomplete field shows up on the next page

  • 17 September 2020
  • 2 replies
  • 25 views

hi, all,
I am new to incorporate Javascript into Qualtrics and would love everyone's help. In one of my survey questions, I am using the following code to allow respondents to autocomplete their response to the question (asking the store number they work at).

Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
});
Qualtrics.SurveyEngine.addOnReady(function() {
var textOptions = [

"3696",
"1233",
"4564",
"1543",
"20921",
"543",
"3569"

];
jQuery('.QR-' + this.questionId).autocomplete({source:textOptions});
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});

The code works. However, the suggested response (e.g. 34668) shows up on the question on the next page (see image below). Would love to know how to solve this. Thank you!
best,
CL

image.png


2 replies

Userlevel 5
Badge +4

Hi ,
If you don't find the work around for this one, then you can refer the alternate below,
1.Create dropdown question and add the required options.
2.Below the question text, add the below library paths.
">https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
">https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js">
image.png

3.Then add the below code in addOnReady function
jQuery('.Selection').select2();


SurajK ,
thank you! This is super helpful!

Leave a Reply