Trying to update a question that we've use previously that asked students to name their friends (5,500 names). We have use the code shown below with success in 2018.



We copied the code into a new survey and now having finding that the autocomplete text selection remains on the screen. Even after advancing to the next page/screen.



Seems like the autocomplete text box are not refreshed/removed. The selected text floats over the subsequent screen. Once you click on the second screen the spurious text disappears and the page displays correctly. I'd also note that each preview window seems to act independently-- you need click each to make the text disappear in each window.



Not sure if this matters but I'm working in jfe.



Do I need to force a page refresh linked to the next button click? How does one do this? Any would suggestions would be greatly appreciated.



Header*

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>



*Question JavaScript*****************

Qualtrics.SurveyEngine.addOnload(function()

{

/Place your JavaScript here to run when the page loads/



});



Qualtrics.SurveyEngine.addOnReady(function()

{

/Place your JavaScript here to run when the page is fully displayed/

var textOptions = [

"Aaron Achoo",

"Aaron Ball",

"Aaron Bagotta",

"Zombor Gal",

"Zyanne Gray",



];

jQuery('.QR-QID560').autocomplete({source:textOptions})



});



Qualtrics.SurveyEngine.addOnReady(function()

{

/Place your JavaScript here to run when the page is fully displayed/



});



Qualtrics.SurveyEngine.addOnUnload(function()

{

/Place your JavaScript here to run when the page is unloaded/



});