Custom javascript/jquery autocomplete field shows up on the next page | Experience Community
Skip to main content
Question

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

  • September 17, 2020
  • 2 replies
  • 52 views
C

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

      SurajK
      QPN Level 3 ●●●
      Forum|alt.badge.img+4
      • SurajK
      • QPN Level 3 ●●●
      • September 17, 2020

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


        C
        • C_X_lin
        • Author
        • September 25, 2020

        SurajK ,
        thank you! This is super helpful!

        Terms & ConditionsAccessibility statement