@ajemerson 

Unsure about the approach suggested above, but can suggest an alternative.

Your issue can be resolved, if you can bring the entire data within Qualtrics and use Supplemental Data to have the dropdown list.

Hope this helps!

P.S.: it’s a paid feature in Qualtrics.

@ajemerson,

The proper way to do it is to use the select2 ajax option. Use the ajax data option to set the parameters that your server side script will use. For example:

	myselect2.select2({
		ajax: {
			url: ajaxUrl,
   			dataType: 'json',
			data: function(params) {
				return {
          			term: params.term || '',
           			page: params.page || 1,
					pageSize: pageSize
       			}
   			},
   			cache: true
		}
    });

params.term is the search term (what the respondent entered).

Thank you for responding, @Deepak. The list of study participants that I need to pull back into Qualtrics changes and is not static. I think I need to go with the ajax call on this.

And thank you, @TomG, for responding. I need to pass an API key in the ajax call. A cursory look at the select2 documentation didn’t have an example of that. Do you have one?

How do I pass the site selected into params.term? It’s a question on the survey. I set an embedded data variable to make it easier to reference -  ${e://Field/site}.  I don’t imagine params.term = ${e://Field/site} would work, would it?

Stackoverflow says I can do this for the header:

ajax: {
    beforeSend: function (request) {
        request.setRequestHeader("X-CSRF-TOKEN", csrf_token);
    },
}

I remain interested in how to send the form field to the ajax call.

I’m getting there! Now have to deal with Cross-Origin Request block.

    var site = Qualtrics.SurveyEngine.getEmbeddedData('site');

    jQuery("#"+this.questionId+" select").select2({

        ajax: {

            url: 'myUrl',

            dataType: 'json',

            headers: {'Authorization': 'Key myKey'},

            cache: true,

            data: function(params) {

                return {

                    site: site,

                    term: params.term || '',

                    page: params.page || 1,

                    pageSize: 20

                }

            }

        }

      });

How is the API key passed? As a url parameter or in the header?

params.term is meant to be the contents of the select2 search box. I haven’t tried to set it. Maybe set the value of the search box with JS and trigger an input event?

The code I posted above shows how to pass the header and URL query parameter. The URL it forms is correct. https://myUrl/participants.php?site=WRJ&term=&page=1&pageSize=20 Now just have to figure out this Cross-Origin error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://myUrl/participants.php?site=WRJ&term=&page=1&pageSize=20. (Reason: header ‘authorization’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response).

You can send other parameters to your web service by including them in the data function return:

data: function(params) {
	`return {
		term: params.term || '',
		page: params.page || 1,
		pageSize: pageSize,
		other: "${e://Field/other}"

	}
}

Your web service must send Access-Control-Allow-Origin in the header.   

BTW, your web service must also return data in the format prescribed by select2: an array of objects with ‘id’ and ‘text’ for each option and a pagination flag if applicable.

Thank you so much for your guidance on this, @TomG !  That is what I shall tackle today. Postman shows my data coming back like this:

{"results"::{"id":"1","text":"W0001"},{"id":"2","text":"W0002"},{"id":"7","text":"W0003"},{"id":"10","text":"W0004"}]}

Success!! Here’s how I got it working:

Cross-Origin error - The API is PHP. I added this to the code which resolved the error:
header('Access-Control-Allow-Headers: Authorization, Content-Type, key');

header('Access-Control-Allow-Origin: *');

I also had to fix the key. Here is the Qualtrics JavaScript I used:

Qualtrics.SurveyEngine.addOnReady(function()

{

    /*Place your JavaScript here to run when the page is fully displayed*/

    var site = Qualtrics.SurveyEngine.getEmbeddedData('site');

    jQuery("#"+this.questionId+" select").select2({

        theme: "classic",

        width: "200px",

        placeholder: "Select participant...",

        ajax: {

            url: 'https://myUrl/participants.php',

            dataType: 'json',

            headers: {'key': 'myKey'},

            cache: true,

            data: function(params) {

                return {

                    site: site,

                    page: params.page || 1,

                    pageSize: 20

                }

            }

        }

      });

});

End result = hooray!!
 

Thanks again, @TomG , for helping!!

@TomG- One last question… how do I save what was selected in the select2 so I can use it on the form? I’d like to set it as embedded data. In the Survey Flow, I tried to add a Set Embedded Data block after the select2 question, but the question isn’t showing up in Insert Piped Text > Survey Question so I can’t pick “Selected Choices”.

I’m guessing in JavaScript I can Qualtrics.SurveyEngine.setEmbeddedData('participant_study_id') but I don’t know what to set it to or where/when to set it.

Do I add this to the addOnUnload function - Qualtrics.SurveyEngine.setEmbeddedData('participant_study_id') = jQuery("#"+this.questionId+" select").filter(":selected").text()

You can use addOnPageSubmit:

Qualtrics.SurveyEngine.addOnPageSubmit(function() {
  Qualtrics.SurveyEngine.setEmbeddedData("participant_study_id",jQuery("#"+this.questionId+" select option:selected").text();
});

That did the trick! Thank you so much, @TomG . We figured out a lot here. I hope others find it helpful. The exact code I used for the last piece is below.

Qualtrics.SurveyEngine.addOnPageSubmit(function()

{

    var selected_participant = jQuery("#"+this.questionId+" select option:selected").text();

    Qualtrics.SurveyEngine.setEmbeddedData("participant_study_id", selected_participant);

});