JQuery autocomplete dropdown menu position

Question

I am using the jQuery autocomplete widget in my project. It is working fine expected that the dropdown menu appends to the body instead of the input. My Codes are as follows:

html

    <div class="flddiv fw"  id="mealcommentsdiv">

    <input id="foodautotest"  type="text" placeholder="autocomplete">

</div>

Javascript

function getVectors(VectorTypeID) {

Vectortype[VectorTypeID]={}

return $.ajax

({

    url: "functions.php",

    data: {
        method: "getvectors",
        VectorTypeID:VectorTypeID
    },

    method: "post",

    dataType: 'json',

    success: function(result)

    {
        Vectortype[VectorTypeID]=result



        switch(VectorTypeID){

            case 1:

                $.each(result,function(key,value){

                    strfoods.push(value)

                })

                $( "#foodautotest" ).autocomplete({
                    source: strfoods,
                    appendTo: "#foodautotest",

                }

                })
                break
        }

    }

});

}

The site uses a ccs grid structure

Thanks for your help

Answer 1

As you mentioned, the autocomplete dropdown menu appends to the body. Because of the absence of appendTo option

Regardless of the value, if no element is found, the menu will be appended to the body.

By providing the option to the div with an absolute position solves the issue.

HTML

<input id="foodautotest" type="text" placeholder="autocomplete">
<div id="autocomplete-cont"></div>

JS

appendTo: '#autocomplete-cont',

CSS

#autocomplete-cont {
  position: absolute;
}

DEMO

 var strfoods = ["Bread", "Beef", "Mango", "Salad", "Eggs", "Chicken", "Pork", "Cabagge", "Ice Cream", "Banana", "Rice", "Xmas Cake", "Cassava", "Potatochip", "Chickhen Curry", "Steak Sandwich", "Bbq Pork", "Pavalova", "Calamari", "Sushi", "Roast Beef", "Duck", "Asparagus"] function getVectors(VectorTypeID) { console.log("Got Vectors:", strfoods); $("#foodautotest").autocomplete({ appendTo: '#autocomplete-cont', source: strfoods }); } getVectors();

 body { color: #000; font-family: Tahoma; font-size: 15px; height: 100%; margin: 0; padding: 0; position: absolute; width: 100%; overflow: auto; overflow-x: hidden; display: contents; } #container { display: grid; grid-template-areas: "fixedpart""movingpart"; grid-template-columns: 1fr } /* placement and layout of items in container grids */ #fixedpart { grid-area: fixedpart; display: grid; grid-template-areas: "mainnav""caselabel""case"; grid-template-columns: 1fr; position: fixed; width: 100%; z-index: 3; } #movingpart { grid-area: movingpart; display: grid; grid-template-areas: "interviewlabel interviewlabel""interview interview""investigation information"; grid-template-columns: 450px 1fr; /* margin-top: 195px; */ } @media screen and (max-width:1280px) { #movingpart { grid-template-columns: 350px 1fr } } /* placement and layout of items in fixedpart grids */ #mainnav { grid-area: mainnav; padding: 10px; display: grid; grid-template-areas: "button form fullscreen"; grid-template-columns: max-content max-content 1fr; grid-gap: 10px; background-color: white; width: 99%; } #caseform { display: grid; grid-template-rows: repeat(4, auto); grid-template-areas: "name""comments""nav""error"; } #caseslabel { grid-area: caselabel; border-bottom: rgb(232, 205, 201) solid thin } #caseform { grid-area: case; padding: 0 10px 10px; } /* placement and layout of items in movingpart grids */ #interviewlabel { grid-area: interviewlabel } #interviewform { grid-area: interview; padding: 10px; display: grid; grid-template-areas: "date firstname lastname age address phone email""gotsick comments comments comments comments comments comments ""nav nav nav nav nav nav nav""error error error error error error error"; grid-gap: 10px; grid-template-columns: 1fr 1fr 1fr 1fr 2fr 1fr 1fr; } #investigation { grid-area: investigation; } #result { grid-area: information; } #investigation, #result { display: grid; grid-template-areas: "nav""display"; grid-template-rows: 40px 1fr; } /* placement and layout of items in mainnav grids */ #mainnav>form { grid-area: form } #mainnav form { display: none; grid-row-gap: 10px; } } /* placement and layout of items in casenamediv and casecommentsdiv grids */ #casenamediv p, #casecommentsdiv p { grid-area: label; } #casename, #casecomments { grid-area: input; } /* placement and layout of items in investigation div grids */ #investigatornav { grid-area: nav; display: grid; grid-template-areas: "button""ul"; grid-template-rows: 40px 1fr; } #mealform { grid-area: display; display: grid; grid-template-areas: "date time""provider provider""food food""comments comments""nav nav"; grid-template-columns: 1fr 1fr; padding: 10px; grid-gap: 10px; } /* placement and layout of items in mealform grids */ #mealdatediv { grid-area: date; display: grid } #mealtimediv { grid-area: time; display: grid } #mealproviderdiv { grid-area: provider; grid-template-areas: "searchbox""button"; display: grid; } #foodconsumeddiv { grid-area: food } #mealcommentsdiv { grid-area: comments } #mealnavigatior { grid-area: nav } /* end grid setup */ p { padding: 0; margin: 0; } input, textarea { border: grey thin solid; } .pac-container { display: none; } /*Color scheme */ .casecol { background-color: rgb(232, 205, 201) } .interviewcol { background-color: rgb(177, 188, 173) } .bodycol { background-color: rgb(244, 252, 242) } .buttoncol { background-color: rgb(226, 216, 216) } .labelcol { background-color: rgb(221, 221, 221) } /*End Color Scheme */ #toggle { background-color: transparent; border: none; padding: 0 } #interviewlabel { border-bottom: rgb(177, 188, 173) solid thin } #btnfirst { border-bottom-left-radius: 10px; border-top-left-radius: 10px; } #btnlast { border-bottom-right-radius: 10px; border-top-right-radius: 10px; } #btnnew { margin-left: 10px; } #mealsdiv { background-color: rgb(244, 252, 242); } #result { background-color: rgb(244, 252, 242); border-left: black thin solid; } #interviewnavigatior { padding-top: 1% } .maindivslabel { text-align: center; background-color: rgb(221, 221, 221); padding: 5px 0 } .ta { text-align: center } #mealform { overflow: hidden; margin: 10px; border: thin black } #autocomplete-cont { position: absolute; }

 <!DOCTYPE HTML> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.js"></script> <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body class="bodycol"> <div id="container"> <div id="fixedpart"> <div class="interviewcol maindivslabel" id="caseslabel"> <span>CASES</span> </div> <form name="caseform" class="casecol" id="caseform"></form> </div> <div id="movingpart"> <div class="interviewcol maindivslabel" id="interviewlabel"> <span>INTERVIEWS</span> </div> <form id="interviewform" class=" interviewcol"> </form> <div id="investigation"> <div id="investigatornav"> <ul class="buttoncol"></ul> </div> <form id="mealform" name="mealform"> <div class="flddiv fw" id="mealcommentsdiv"> <input id="foodautotest" type="text" placeholder="autocomplete"> <div id="autocomplete-cont"></div> </div> </form> </div> <div id="result"> <div id=navdiv class="buttoncol"> <div id="uldiv"> <ul id="resultnav" class="buttoncol"></ul> </div> </div> </div> </div> </div> </body>

Answer 2

I was unable to replicate the issue as you posted it. I tested the following code:

 $(function() { var strfoods = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; function getVectors(VectorTypeID) { console.log("Got Vectors:", strfoods); $("#foodautotest").autocomplete({ source: strfoods }); } getVectors(); });

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="flddiv fw" id="mealcommentsdiv"> <input id="foodautotest" type="text" placeholder="autocomplete"> </div>

This is working as expected.

You mentioned your page is using a CSS Grid, yet you did not include any CSS in your example. In regards to the appendTo option, pleas see:

Which element the menu should be appended to. When the value is null , the parents of the input field will be checked for a class of ui-front . If an element with the ui-front class is found, the menu will be appended to that element. Regardless of the value, if no element is found, the menu will be appended to the body .

Note: The appendTo option should not be changed while the suggestions menu is open.

So by default, it is being appended to the body with position so it appears "under" the input field. I think you want to append to the parent, #mealcommentsdiv and not the <input> element itself. There is no way to test this with your given example as it does not contain all the proper elements or styles.

As the widget creates elements, to display the menu, this cannot be appended to an Input field. It can be appended to the parent and is then positioned to appear under the field.

Answer 3

I dont think it's even possible to render elements inside an input element. How about to render the dropdown next to the input as a sibling.

html

<div>
    <div class="flddiv fw" id="mealcommentsdiv">
    <input id="foodautotest" type="text" placeholder="autocomplete">

    <!-- let's take this one as parent-->
    <div id="autocomplete-wrapper"></div>
</div>

js

$( "#foodautotest" ).autocomplete({
    source: strfoods,
    appendTo: "#autocomplete-wrapper",
});

If this does not fit your needs please add more informations to the question why you need to append the dropdown to the input element.

EDIT: Please make sure that your JQuery and JQueryUI is up to date, because there are some incompatibilities that caused errors in JQuerys offset function.

See here: https://github.com/vanderlee/colorpicker/issues/132

Currently the latest versions are:

https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.js
https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css
https://code.jquery.com/ui/1.12.1/jquery-ui.js