using easy-autocomplete in Qualtrics

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

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;
}

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

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

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

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

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