Custom javascript/jquery autocomplete field fails to show below the question | XM Community
Skip to main content

I've implemented the following javascript code to use the autocomplete feature within the text field question in Qualtrics.
Qualtrics.SurveyEngine.addOnReady(function()
{
var textOptions = [

"Adam", "Athelney", "Baring"

];
jQuery('.QR-' + this.questionId).autocomplete({
source: textOptions,
minLength: 3
});

});
The code works; however, the autocomplete suggestions appears at the end of the page (below "Powered by Qualtrics" URL link). See the first screenshot:
enter image description here
I am not sure whether this is a bug within Qualtrics; however, I've tested the same code on an account provided by a different University (see the second screenshot below) where the same code works as expected (the suggestion appears right below the question, not at the end of the page) so I am left puzzled by this behavior.
Qualtrics screenshot 2
Any ideas what may cause this behavior and how to resolve it? (both examples don't use any custom CSS or such but they are accounts hosted at two different Universities) Thank you.

check the Look & Feel's theme on the domain where the JavaScript failed. Some domain apply default theme, which contains default CSS that change the behavior of your jQuery autocomplete.

Were you ever able to get this to work? I ran in to the same situation.

In the past I would include jquery/jquerymobile/jqueryui, but now it seems as though jQuery should be included. Unfortunately, by including some extra libraries I can get the placement correct - but then once you select an item in the autocomplete it pops the hint up again with the response and I can't get it to stop that. Very frustrating...

jQuery autocomplete looks for `.ui-front` on a parent element; if it's not set you need to explicitly add a selector with the appendTo option in your custom js code for that questions.
  var yourSourceList = ='foo', 'bar', 'baz'],
$elem = jQuery('.QR-'+this.questionId),
$elemParent = $elem.parent();

jQuery($elem).autocomplete({ 
  source: yourSourceList,
    minLength:3,
appendTo: $elemParent
  });

Leave a Reply


Terms & Conditions