How to correcly position javascript autocomplete | XM Community
Skip to main content
Michael_Cooksey
Administrator
22 days ago
Question

How to correcly position javascript autocomplete

  • February 14, 2025
  • 1 reply
  • 9 views
C
Forum|alt.badge.img+1

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?

 

    1 reply

    C
    Forum|alt.badge.img+1
    • cormanaz
    • Author
    • 2 replies
    • February 14, 2025

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

     

    Leave a Reply


    Terms & Conditions