How to correcly position javascript autocomplete | XM Community
Skip to main content

I am using the following javascript to implement an autofill function for U.S. counties in a text box (counties list shortened for readability): 

Qualtrics.SurveyEngine.addOnload(function()
{
var textOptions = ["Abbeville","Acadia","Accomack","Ada","Adair","Adams","Addison","Aiken","Aitkin"];

Query('.InputText').autocomplete({
        source: function(request, response) {
            var term = request.term.toLowerCase();
            var results = jQuery.grep(textOptions, function(item) {
                return item.toLowerCase().indexOf(term) === 0; // Match from beginning
            });
            response(results.slice(0, 5)); // Show max 5 results
        }
    });
});

It is working, but the autocomplete options are positioned way below the text box as shown in the screenshot below. I tried some of the CSS options given in this thread, but they didn’t have any effect. What to do?

 

I got ChatGPT to have a look at that post I linked and figure out a solution. Here is the working code:

jQuery('.InputText').autocomplete({
    source: function(request, response) {
        var term = request.term.toLowerCase();
        var results = jQuery.grep(textOptions, function(item) {
            return item.toLowerCase().indexOf(term) === 0; // Match from beginning
        });
        response(results.slice(0, 5)); // Show max 5 results
    },
    appendTo: ".QuestionBody", // Ensure dropdown stays inside question container
    open: function(event, ui) {
        jQuery(".QuestionBody").css("cssText", "padding-bottom: 100px !important;"); // Add extra space
    }
});

 

Terms & ConditionsAccessibility statement