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 = d'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>

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

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?

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 :)

Thanks! Very helpful!

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*/

});