Hi All,
I sucessfuly got jquery UI autocomplete function to work on a text field but found it glitchy. I then discovered that Qualtrics (if you ask!) have an autocomplete function too but it's just a glitchy (I suspect they are using jquery UI too). Therefore I found a different app called easy-autocomplete (http://easyautocomplete.com/) and went about setting up the header in the look and feel and giving it a go.
This is the header info:
This is the JS code I place in the question addonload part. I based it on the 'basics' section of http://easyautocomplete.com/guide
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
//this returns the day of the week
//https://www.qualtrics.com/community/discussion/1607/inserting-month-as-piped-text
//https://stackoverflow.com/questions/24998624/day-name-from-date-in-js/24998705
var options = {
data: ["blue", "green", "pink", "red", "yellow"]
};
jQuery('.QR-' + this.questionId).easyAutocomplete(options);
});
However, when I go to run it I get some errors in the console:
SE API Error: TypeError: $.inArray is not a function
at c (VM200509 jquery.easy-autocomplete.min.js:10)
at g (VM200509 jquery.easy-autocomplete.min.js:10)
at new a.Configuration (VM200509 jquery.easy-autocomplete.min.js:10)
at new a.main (VM200509 jquery.easy-autocomplete.min.js:10)
at HTMLInputElement.
at Function.each (VM198649 vendor.ebcc59b90a2a037c75b9.js:1)
at yt.fn.init.each (VM198649 vendor.ebcc59b90a2a037c75b9.js:1)
at yt.fn.init.a.fn.easyAutocomplete (VM200509 jquery.easy-autocomplete.min.js:10)
at S.r.eval (eval at
at S.r.
After a little reading around I got the feeling that .inArray is relating to a function that the Qualtrics JavaScript code doesn't have and so I added to the header (as recommended by the easy-autocomplete website)
This stopped the errors apart from:
DevTools failed to load SourceMap: Could not load content for https://cdn.jsdelivr.net/npm/easy-autocomplete@1.3.5/dist/easy-autocomplete.min.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
but nothing else happens so I don't think it's working. Please can someone help me try to get easy-autocomplete working? Or likewise if there is an alternative autocomplete app which works well pleae let me know and I'll give that a try.
Thanks
Rod Pestell
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 , 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
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
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
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.