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 Qubie ✭

    @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 Qubie ✭

    @AnthonyR Thanks! that's perfect and simple.

  • rettweberrettweber East LansingCommunity Member Qubie ✭

    @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 Qubie ✭

    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 Provo, UTCommunity 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 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.

Sign In to Comment