Adding autocomplete JavaScript to my survey?

BarnabyBarnaby Provo, UTFounding Community Member CEP (Chief Executive Paw-ficer)

Adding autocomplete JavaScript to my survey?

How can I incorporate autocomplete JavaScript into my survey? For example, like the documentation shown here (http://jqueryui.com/autocomplete/). I have a text entry question that asks "Where do you live?" I would like to have an autofill solution that when the user starts to type in "n" it will prompt answers such as New York, New Jersey, etc.

Best Answer

  • AnthonyRAnthonyR Tucson Az Superuser ✭✭✭✭
    edited December 2017 Accepted Answer

    This is do-able. though it will take a bit of work to achieve.

    In your header, you will need to include jquery and jqueryui and run jquery.noconflict

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    

    Then in the question you are adding this to, you will add the following to the addOnReady function of the Javascript editor (Update the array of possible entries according to your needs):

    var textOptions = [
    "art","ant","all","alt","pun","pit"
    ];
    jQuery('.InputText').autocomplete({source:textOptions})
    

    I have attached a QSF of this working.

Answers

  • rettweberrettweber East LansingCommunity Member, Product Ideas Guru ✭✭

    @AnthonyR ,

    This is GREAT! I tried it out but it would be helpful to specify the question so if you have more than one textbox, you can put different lists in each of the textboxes... so how do you properly reference a given question.

    The attached survey includes 2 text questions which are supposed to have different options (one uses textOptions and the other uses textOptions2) because textOptions2 is loaded second, those are applied to both text input boxes. Sooo... sorry to ask such a basic question, but how do I reference the specific question in the jQuery autocomplete statement.

    Thanks!!
    P.S. sorry for sending so many posts.

  • AnthonyRAnthonyR Tucson AzFounding Community Member Superuser ✭✭✭✭

    @rettweber

    Update to the following, to only add this to the particular question's text entry.

    var textOptions = [
    "art","ant","all","alt","pun","pit"
    ];
    jQuery('.QR-' + this.questionId).autocomplete({source:textOptions})
    
  • rettweberrettweber East LansingCommunity Member, Product Ideas Guru ✭✭

    @AnthonyR Thanks! that's perfect and simple.

  • rettweberrettweber East LansingCommunity Member, Product Ideas Guru ✭✭

    @AnthonyR Can you explain how the '.QR-'+this.questionId works to identify the specific question? I know that + concatenates 2 strings and this refers to the current object (but I thought that would be the document as a whole). So this gets to how to use DOM and jQuery.

    I am documenting the process in a QSF file with a descriptive text question as the first question in the survey. I want to try to describe how the elements fit together so the process can be replicated by someone with limited programming knowledge and potentially applied in other contexts.

    Once again, really appreciate your time and knowledge!

    Thanks!

  • rettweberrettweber East LansingCommunity Member, Product Ideas Guru ✭✭

    Hi @AnthonyR ,
    1st, this works great for several of my questions, however, When I put a Shiboleth SSO Authenticator in the survey flow, it no longer works.

    Thanks!

  • G2000G2000 Community Member Qubie ✭

    @AnthonyR - thanks for posting this, it helped me out as well!

    I ran into performance issues when populating this with a large number of options (10,000).
    Is there any way to start the autofill search only once users type a certain number of characters?
    Any help would be appreciated - thanks!!

  • AnthonyRAnthonyR Tucson AzFounding Community Member Superuser ✭✭✭✭

    @G2000 Absolutely possible! Just update to this:

    var textOptions = [
    "arts","ants","alls","alts","puns","pits"
    ];
    jQuery('.QR-' + this.questionId).autocomplete({
    source: textOptions,
    minLength: 3
    })

    Other options for this can be found here: http://api.jqueryui.com/autocomplete/#option-minLength

  • G2000G2000 Community Member Qubie ✭

    Thanks, @AnthonyR! This did the trick!

  • AporApor Community Member - Trial User Qubie ✭
    edited August 2018

    Thanks this is helpful.

  • stsharpstsharp Athens, GACommunity Member Qubie ✭

    As a follow up to this request, is there a way to keep the user from typing in a value in the text box if it doesn't match one of the option in the auto complete?

    This is the code i'm using:

    Qualtrics.SurveyEngine.addOnload(function()
    {
    /Place your JavaScript here to run when the page loads/

    });

    Qualtrics.SurveyEngine.addOnReady(function()
    {
    var textOptions = [
    "Michael Adams","Jon Amster","Mike Adang","Jill Anderson","Norris Armstrong"
    ];
    jQuery('.QR-' + this.questionId).autocomplete({source:textOptions})

    });

    Qualtrics.SurveyEngine.addOnUnload(function()
    {
    /Place your JavaScript here to run when the page is unloaded/

    });

    Works great - when the user begins typing in the text area, it pulls up any match to the letters they type. But if they just type in "foo" for instance, they are allowed to submit it. I am trying to restrict it so they have to choose an entry available in the autocomplete only.

    Anyways to enforce this?

  • LaurenKLaurenK Seattle, WACommunity Administrator Administrator

    Hey @stsharp! I would recommend posting this as a new question so it goes to our Unanswered section and gets more visibility from our community members!

  • TomGTomG Raleigh, NCCommunity Member, Product Ideas Wizard ✭✭✭✭✭

    @stsharp,

    You can change your question to a multiple choice drop down, then integrate select2. See this thread:
    https://qualtrics.com/community/discussion/comment/1348#Comment_1348

    P.S. It is best to start a new thread for these types of questions.

  • marketintelmarketintel Sydney, AustraliaCommunity Member Qubie ✭

    @AnthonyR said:
    @rettweber

    Update to the following, to only add this to the particular question's text entry.

    var textOptions = [
    "art","ant","all","alt","pun","pit"
    ];
    jQuery('.QR-' + this.questionId).autocomplete({source:textOptions})
    

    Hi Anthony R, thanks for posting this up and I hope you are still connected to the Qualtrics community!

    I have successfully implemented autocomplete using 'InputText', but when I try to link to question ID QR~QID1 I had no success.

    Would you mind spelling out the syntax for question ID QR~QID1, please? I have tried # and ~ so far to no avail.

    jQuery('.QR-' + this.questionId).autocomplete({source:textOptions})

    Thanks in advance!

  • rettweberrettweber East LansingCommunity Member, Product Ideas Guru ✭✭

    Hi @marketintel ,

    The this.questionId works if it is in the question you are in the JavaScript for the question you are trying to update. for instance, I clicked on the JavaScript section for a question and added the following.

    Qualtrics.SurveyEngine.addOnReady(function()
    {
    /*Place your JavaScript here to run when the page is fully displayed*/
    var textOptions = [
    "text option 1 we'll make this one John",
    "text for options 2 lets say Bob",
    "text for option 3 how about Jane"
    ];
    jQuery('.QR-'+this.questionId).autocomplete({source:textOptions})
    });
    

    Note that it says this.questionId this refers to the current question. You need to make sure you also added the code to your header ( in look and feel) referencing the library you will be using.

    In header added to html
    <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" /><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

    also note that the statement var textOptions create a variable called textOptions. I could have named it george instead. There is nothing special about the name textOptions. If you have more than one list, even if they are in separate parts of the survey, you should use different variable names for each, just to be safe. You also need to remember that JavaScript cares about capitalization. So make sure that all of the object and variable references match in capitalization.

    Hopefully I am not telling you information you already knew.

    Good luck,

    Rett

  • marketintelmarketintel Sydney, AustraliaCommunity Member Qubie ✭
    edited July 29

    Hi @rettweber,

    Thanks for your help as I am no expert in JavaScript or JS Query. Using the syntax as written, i.e. '.QR-'+this.questionId worked for me and I will have separate variable names for different lists throughout the survey.

    What I would like to do now is to:

    1) No longer display the auto-complete once the user makes a selection, specially in subsequent survey pages/blocks, which I tried to do by using an Unload action to no avail

    Qualtrics.SurveyEngine.addUnload(function()
    {
    jQuery('.QR-'+this.questionId).autocomplete({source:textOptions, disabled:true);
    });

    On a computer, the content is still displayed at the top left, whereas on a mobile it displays at the very bottom.

    2) Capture a substring of the answer (the last 4 digits) to drive the display logic and send respondents down different routes.

    Thanks again for your time!

  • rettweberrettweber East LansingCommunity Member, Product Ideas Guru ✭✭

    Hi @maketintel,

    I am not sure what you mean by the not showing the autocomplete after it has been selected.

    Regarding setting the last 4 characters to control survey flow, Qualtrics does not have any string manipulation functions. You should be able to use the javascript substring function. Look down on the page to find where they use a negative value to start from teh end of the string.

    https://www.w3schools.com/jsref/jsref_substring.asp

    Once you set the value in the question, you should be able to extract the last for characters in the string and use that to set an embedded data variable which you can then use to set survey flow.

    You should probably use the onchange state for the question. When I work these things out I usually set up a test survey and play with the code there before I put what I have figured otu ito a larger survey. I would suggest you do that as well.

    Here is an example of setting embedded data using the setEmbeddedData(fieldname, fieldValue) function from Qualtrics. Remember to be very careful with case. JavaScript is case sensitive.

         var participantNumber = Math.floor((Math.random()*1000000)+1);
         Qualtrics.SurveyEngine.setEmbeddedData("ParticipantNumber",participantNumber);
    

    this is from ( https://s.qualtrics.com/WRAPI/QuestionAPI/classes/Qualtrics%20JavaScript%20Question%20API.html#method_setEmbeddedData )

    I would love to see what the final code looks like.

    Good luck,

    Rett

Sign In to Comment