Как вы упомянули, выпадающее меню автозаполнения добавляется к телу. Из-за отсутствия опции appendTo
Независимо от значения, если элемент не найден, меню будет добавлено к телу.
Предоставление опции для div с позицией absolute решает проблему.
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>