Can I set up a type-search-and-select choice question in Qualtrics? | XM Community
Question

Can I set up a type-search-and-select choice question in Qualtrics?

  • 24 January 2024
  • 10 replies
  • 216 views

Badge +1

Hi everyone,


I am seeking assistance on optimizing a survey question. The respondents are required to select a sector from a dropdown list containing 285 options. Considering the extensive list, I am exploring the possibility of implementing a question where respondents can initially input a rough approximation of the target sector name. Subsequently, the system would conduct a search within my uploaded options and present a narrowed-down selection of possible matches. This approach aims to simplify the process for respondents, alleviating the need to sift through an extensive list of sector options.

Thank you so much guys :)


10 replies

Userlevel 3
Badge +11

You can do this, if you use a bit of CSS and JavaScript. Just copy the below code in to the HTML part of a text question. Once you see how it works, you can modify to use data from Qualtrics and to add the result in a Qualtrics question.

Here is the Example:

Find fruit:
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
    #search-input {
      padding: 10px;
      font-size: 16px;
    }
    #result-list {
      list-style: none;
      padding: 0;
      margin: 0;
      position: absolute;
      background-color: #f9f9f9;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      display: none;
    }
    #result-list li {
      padding: 10px;
      cursor: pointer;
    }
    #result-list li:hover {
      background-color: #ddd;
    }
  </style>
  <input type="text" id="search-input" placeholder="Type to search...">
  <ul id="result-list"></ul>

  <script>
    // Sample array for demonstration
    const dataArray = ['Apple', 'Banana', 'Cherry', 'Date', 'Grape', 'Lemon', 'Orange', 'Peach', 'Pear', 'Plum'];

    const searchInput = document.getElementById('search-input');
    const resultList = document.getElementById('result-list');

    // Event listener for input field
    searchInput.addEventListener('input', function() {
      const inputValue = searchInput.value.toLowerCase();
      const filteredArray = dataArray.filter(item => item.toLowerCase().includes(inputValue));

      // Display filtered results in the dropdown
      displayResults(filteredArray);
    });

    // Function to display search results in the dropdown
    function displayResults(results) {
      // Clear previous results
      resultList.innerHTML = '';

      // Display results in the dropdown
      results.forEach(result => {
        const listItem = document.createElement('li');
        listItem.textContent = result;
        listItem.addEventListener('click', function() {
          // Set selected result in the input field
          searchInput.value = result;
          // Clear the dropdown
          resultList.innerHTML = '';
        });
        resultList.appendChild(listItem);
      });

      // Show the dropdown
      resultList.style.display = results.length > 0 ? 'block' : 'none';
    }

    // Close the dropdown if the user clicks outside of it
    window.addEventListener('click', function(event) {
      if (!event.target.matches('#search-input')) {
        resultList.style.display = 'none';
      }
    });
  </script>

Userlevel 7
Badge +27

@Ronnie - You can use select2 to do this.  Here is a post about implementing it:

 

Badge +1

You can do this, if you use a bit of CSS and JavaScript. Just copy the below code in to the HTML part of a text question. Once you see how it works, you can modify to use data from Qualtrics and to add the result in a Qualtrics question.

Here is the Example:

Find fruit:
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
    #search-input {
      padding: 10px;
      font-size: 16px;
    }
    #result-list {
      list-style: none;
      padding: 0;
      margin: 0;
      position: absolute;
      background-color: #f9f9f9;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      display: none;
    }
    #result-list li {
      padding: 10px;
      cursor: pointer;
    }
    #result-list li:hover {
      background-color: #ddd;
    }
  </style>
  <input type="text" id="search-input" placeholder="Type to search...">
  <ul id="result-list"></ul>

  <script>
    // Sample array for demonstration
    const dataArray = ['Apple', 'Banana', 'Cherry', 'Date', 'Grape', 'Lemon', 'Orange', 'Peach', 'Pear', 'Plum'];

    const searchInput = document.getElementById('search-input');
    const resultList = document.getElementById('result-list');

    // Event listener for input field
    searchInput.addEventListener('input', function() {
      const inputValue = searchInput.value.toLowerCase();
      const filteredArray = dataArray.filter(item => item.toLowerCase().includes(inputValue));

      // Display filtered results in the dropdown
      displayResults(filteredArray);
    });

    // Function to display search results in the dropdown
    function displayResults(results) {
      // Clear previous results
      resultList.innerHTML = '';

      // Display results in the dropdown
      results.forEach(result => {
        const listItem = document.createElement('li');
        listItem.textContent = result;
        listItem.addEventListener('click', function() {
          // Set selected result in the input field
          searchInput.value = result;
          // Clear the dropdown
          resultList.innerHTML = '';
        });
        resultList.appendChild(listItem);
      });

      // Show the dropdown
      resultList.style.display = results.length > 0 ? 'block' : 'none';
    }

    // Close the dropdown if the user clicks outside of it
    window.addEventListener('click', function(event) {
      if (!event.target.matches('#search-input')) {
        resultList.style.display = 'none';
      }
    });
  </script>

Thank you so much. I copied your code here, but it didn’t work. Did I do the right thing, or I need to copy your code elsewhere?

Userlevel 3
Badge +11

Hi @Ronnie 

Even if some of it it Javascript, my example is build a bit different.

First of all, I would recommend that you have a look at @TomG ‘s suggestion for the Select2 option. This is by far a better solution, that I did not know of when I made my suggestion.

If you still want to try mine, use a simple text/graphic field, and then edit the text in HTML mode, then past my entire example in there and save.

This will create the field and show you what you need, but it was only meant as an example to get you started, and not a full example, which is why @TomG ‘s link is much better :)

Badge +1

@Ronnie - You can use select2 to do this.  Here is a post about implementing it:

 

Thanks! Very helpful!

Badge +1

@Ronnie - You can use select2 to do this.  Here is a post about implementing it:

 

Hi @TomG ! Do you know why it does not work when I change the layout of the survey into another type?

Userlevel 7
Badge +27

@Ronnie - You can use select2 to do this.  Here is a post about implementing it:

 

Hi @TomG ! Do you know why it does not work when I change the layout of the survey into another type?

I’m guessing you changed it to Simple layout. If so, you’ll need to load jQuery. You can only use select2 on multiple choice select boxes because dropdowns aren’t select elements in Simple layout. You also can’t use it on side-by-side or drill-down questions for the same reason. 

Badge +1

@Ronnie - You can use select2 to do this.  Here is a post about implementing it:

 

Hi @TomG ! Do you know why it does not work when I change the layout of the survey into another type?

I’m guessing you changed it to Simple layout. If so, you’ll need to load jQuery. You can only use select2 on multiple choice select boxes because dropdowns aren’t select elements in Simple layout. You also can’t use it on side-by-side or drill-down questions for the same reason. 

It works well when I use the Simple layout. I want to change the theme to Flat. But it doesn’t work under this theme.

Userlevel 7
Badge +27

@Ronnie - You can use select2 to do this.  Here is a post about implementing it:

 

Hi @TomG ! Do you know why it does not work when I change the layout of the survey into another type?

I’m guessing you changed it to Simple layout. If so, you’ll need to load jQuery. You can only use select2 on multiple choice select boxes because dropdowns aren’t select elements in Simple layout. You also can’t use it on side-by-side or drill-down questions for the same reason. 

It works well when I use the Simple layout. I want to change the theme to Flat. But it doesn’t work under this theme.

With Flat theme you should not load jQuery - it is already loaded. You may need to adjust your jQuery selector(s) as the DOM is quite different than Simple layout.

Badge +1

@Ronnie - You can use select2 to do this.  Here is a post about implementing it:

 

Hi @TomG ! Do you know why it does not work when I change the layout of the survey into another type?

I’m guessing you changed it to Simple layout. If so, you’ll need to load jQuery. You can only use select2 on multiple choice select boxes because dropdowns aren’t select elements in Simple layout. You also can’t use it on side-by-side or drill-down questions for the same reason. 

It works well when I use the Simple layout. I want to change the theme to Flat. But it doesn’t work under this theme.

With Flat theme you should not load jQuery - it is already loaded. You may need to adjust your jQuery selector(s) as the DOM is quite different than Simple layout.

Thank you! Could you provide a suggestion on how can I modify the JAVASCRIPT.

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

});

Qualtrics.SurveyEngine.addOnReady(function()
{
    /*Place your JavaScript here to run when the page is fully displayed*/

    jQuery("#"+this.questionId+" select").select2();
});

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

});

Leave a Reply