I spent sometime trying to figure this out, but unfortunately didn't get anywhere. What I think is happening is that Qualtrics is taking over the list elements that this library is creating and that's why nothing seems to be working.
I looked at other libraries and found the same issue with most. It was a quick and dirty setup, so maybe I missed something. The one that seems to work was Typeahead.
You could use that instead.

---

Hi ahmedA , thanks for having a look at this, is that what the .inArray error lead you to believe or was it something else that gave you the clue?

I found this example for typehead: https://codepen.io/mcguiretj/pen/QVgmoq but I was struggling a little to get it to display more than 5 and have a scroll bar like in the example on this page but I think I've now got a working example, I'm not sure if there are some things though that I don't need.
http://twitter.github.io/typeahead.js/examples/
It looks like the look and feel header needs to use: https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.jquery.min.js
I'll give it go without https://code.jquery.com/jquery-2.2.4.min.js first but will add this in if there are problems.
As for the CSS the Codepen example gave this link: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css do I actually need this? What is a bootstrap?

html:

CSS (overflow-y enables the scroll bar and height controls the height of the drop down box):
.tt-menu { /* UPDATE: newer versions use tt-menu instead of tt-dropdown-menu */
    width: 422px;
    margin-top: 12px;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    overflow-y: auto;
    height: 200px;
}

JS:
g df gdfgdf var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substringRegex;

    // an array that will be populated with substring matches
    matches = ];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');

    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
      if (substrRegex.test(str)) {
        matches.push(str);
      }
    });

    cb(matches);
  };
};

var states = �'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon' /*abbreviated as hitting character limit*/
];

$('#the-basics .typeahead').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  name: 'states',
  source: substringMatcher(states),
  limit: 20
});

So to get this working in Qualtrics can you confirm I change
$('#the-basics .typeahead').typeahead({
 ...
},
{
 ...
});

to this:
jQuery('.QR-' + this.questionId).typeahead({
...
},
{
...
});

Do you happen to have a working example inside Qualtrics already?

Thanks

Rod Pestell

---

Hi ahmedA
I've got it working (didn't include the CSS link, just used the CSS code from the codepen.io example as otherwise it was interferring with the normal theme. I also didn't include the refrence to jQuery).
Had a few problems at first but then realised that the code needed to be placed in the addOnReady section.
One problem remains, the QuestionBody style doesn't expand when the drop down list appers. I've tried things like Height: Auto or Max-Height but they don't seem to work.
You can see the top edge of the drop down box in this pic
Can you point me in the right direction of expanding the height of the QuestionBody / area?

Thanks

Rod Pestell

---

Two other questions... is there a way to ensure the responder isn't allowed to do a free response, ie type in anything they like?
And also I've just tried this on my phone (android 8, chrome browser) and there is no scroll bar, yet on Chrome desktop, it's there. Any thoughts anyone?
Thanks
Rod Pestell

Phone
Desktop

---

Wow! It's really nice to see how much you've accomplished so far.
1. No there's no way to do that. If you're looking to emulate a dropdown and then it would be better to go with Select2. In this case what you can do is add an event listener to the input and check its values. Something like:
document.querySelector("#QR\\\\~" + this.questionId).oninput = function (e) {
    let nb = document.querySelector("#NextButton");
    if (states.indexOf(e.target.value) !== -1) nb.disabled = false;
    else nb.disabled = true;
};

2. Scroll bars are controlled by the browser style sheet. So you need to override them. Use this CSS (source)
.Android ::-webkit-scrollbar {
    display: block;
}
 ::-webkit-scrollbar {
    width: 12px !important;
 }
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}


::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #ffffff;
}

---

Thanks for the info - I'll have a look at adding that in. Re the CSS for scrolling, I'd like to inject that via jQuery for the specific question, so that it doesn't upset anything else. How would you write that code?
I'm not sure what the :: means
for instance
.Android ::-webkit-scrollbar {
    display: block;

would it be written something like this:

jQuery('.QR-' + this.questionId + ".Android ::-webkit-scrollbar").css({"display":"block"})

Thanks

Rod

---

Hi ahmedA , regarding getting the scroll bar in the drop down I thought I was onto something following this thread: https://stackoverflow.com/questions/12555258/set-webkit-scrollbar-thumb-visibility-in-jquery

I amended the css so that it had a class at the beginning of each in the CSS part of the look and feel:
.Androidscroll1 ::-webkit-scrollbar {
    display: block;
}
.Androidscroll2 ::-webkit-scrollbar {
    width: 12px !important;
 }
.Androidscroll3::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 5px;
    border: 2px solid #ffffff;
}


.Androidscroll4::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: rgba(0, 0, 0, .1);
}

and then in the JS code of the question added this (in the addonReady section).
    jQuery(this.questionId).addClass('Androidscroll1');
    jQuery(this.questionId).addClass('Androidscroll2');
    jQuery(this.questionId).addClass('Androidscroll3');
    jQuery(this.questionId).addClass('Androidscroll4');
  
But no luck. What makes things 100 times more difficult is there doesn't seem to be any debugging of CSS code, either you've got it right or not. Nor does the mobile option of the preview window show you the true result of what I'm trying to do - I have to use my mobile phone to see if it's working properly.
Obviosuly my self taught JS and CSS is at the limit here!! :(
Hope you can help

Thanks

Rod Pestell

---

Edit your question HTML and put all your CSS between

---

ooo, good suggestion! Just tried it but unfortunately it's still putting scroll bars everywhere. I need to apply the scroll elements to the 'tt-menu' class only. I've been trying examples like this
jQuery("#"+this.questionId).find('.tt-menu').css({"height":"20px"})
which seems to work but I'm struggling on getting the syntax of the required elements right (still haven't managed to figure out what the :: is for aswell!)
.Android ::-webkit-scrollbar {
    display: block;
Any pointers or am I going down the wrong path because this type of style can't be amended via jQuery?

Thanks

Rod Pestell

---

 

::

is for pseudo elements. Things like hover etc. more here
They can be edited, but it's a little more complicated, you'll need to add it by setting the attribute style to a particular value.
jQuery(el).attr("style",".....")
It's better to stick with CSS for these.

---

Thanks ahmedA for your continued support on this - I'm so close now I feel,

Can you provide an example using attr?

If that's still too complicated am I stuck or is there still a way to add the css code to just the tt-menu class? I thought I was on the right track using the addClass route but perhaps not.
Came across this info (https://stackoverflow.com/questions/39266583/change-the-scrollbar-track-color-dynamically-using-jquery) which looks like it does a find and replace adding in style info - rather complex - might not be able to figure our how to tweak it for my needs
Adding the CSS to the HTML part of the question displays the below screen shot - Scroll bar city!
Thanks
Rod Pestell

---

Is there a particular reason you want to use jQuery for CSS?

---

I'm ashamed to say it's the only the way I know! :s

Plus most of the time, it's only one question that I often want to change an manipulate. I have no formal training on JS, CCS so just trying to pick it up as I go.

Thanks

Rod Pestell

---

When you apply CSS between the style tags in the question HTML, it works only on the page.
.tt-menu is something exclusive to the dropdown, so why do you not want to apply it globally?

---

https://community.qualtrics.com/discussion/comment/38476#Comment_38476As per the screenshot above it looks messy with all the other scroll bars appearing. We've got numerous pages with multiple questions on so it's likely a global change will make all the other questions look messy. A specific change would be better.

I'll keep persevering but if you could guide me on the .attr( command or something else that would inject the right code that would be much appreciated.

Thanks

Rod Pestell

---