How to correcly position javascript autocomplete

Question

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?

cormanaz · Answer

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    }});

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded