Javascript Autocomplete Formatting | XM Community
Skip to main content

Hi all, I'm trying to implement a custom autocomplete for a text entry field using javascript but having trouble with how to format it. I have the following code for my text entry question:

Qualtrics.SurveyEngine.addOnReady(function()
{
/*Place your JavaScript here to run when the page is fully displayed*/

let textOptions = ["John", "Jimmy", "Jonathon", "Jimbo"]
   let $elem = jQuery('.QR-'+this.questionId)
   let $elemParent = $elem.parent();

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

});

However, when I type "J" into the text box the dropdown menu is cut off seemingly by the Next Button HTML Section. How do I fix this?
Screen Shot 2022-08-12 at 11.49.25 AM.png

Hi there, neat code! If you still need, you should be able to include more space for the autofill dropdown to display by adding padding to the bottom of the QuestionBody via CSS. Try adding the below over in the survey's Look & Feel in the Style section:
.Skin .QuestionBody{
padding-bottom: 100px;
}
AutofillJS.png

Hi there! I'm a completely novice coder (but expert copy/paste/edit-er). I was able to get adstr_bepp's code to run (it's great!), but am having the same formatting issue. Is there a way to get Tom_1842's fix to apply to a single question rather than the whole survey?
Thanks in advance!

Hi HilaryT , while expanding the QuestionBody padding works decently for this, on second thought, I might recommend trying the below CSS over in the Style section of the survey's Look & Feel to style the autocomplete menu directly:
.JFEScope .ui-menu {
z-index: 99999;
position: relative;
}
CSS can be applied at the question level with JavaScript and at the page level by adding it to the HTML of Question Text on that page. I tend to use the page level since the JavaScript method does not apply the styling until the page is loaded. For the page level method, try adding the below to the HTML/Source view of the question's Question Text using the Rich Content Editor:

Click here to write the question text
For the question level method, try adding the below to the question's JavaScript in the OnReady section:
jQuery("#"+this.questionId+" .QuestionBody").css("cssText", "padding-bottom: 100px !important;");

Thank you so much!

Leave a Reply


Terms & Conditions