Javascript JQuery自动完成下拉菜单位置

我正在项目中使用jQuery自动完成小部件。如果下拉菜单附加到正文而不是输入，则工作正常。 我的代码如下：

html

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

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

</div>

<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>

该站点使用ccs网格结构

---

感谢您的帮助

我无法复制您发布的问题。我测试了以下代码：

$（函数（）{
变量strfoods=[
“动作脚本”，
“AppleScript”，
“Asp”，
“基本”，
“C”，
“C++”，
“Clojure”，
“COBOL”，
“ColdFusion”，
“二郎”，
“Fortran”，
“好极了”，
“哈斯克尔”，
“爪哇”，
“JavaScript”，
“口齿不清”，
“Perl”，
“PHP”，
“Python”，
“红宝石”，
“斯卡拉”，
“方案”
];
函数getVectors（VectorTypeID）{
log（“获取向量：”，strfoods）；
$（“#foodautotest”）。自动完成({
资料来源：strfoods
});
}
getVectors（）；
});
我认为甚至不可能在输入元素中呈现元素。如何将输入旁边的下拉列表呈现为同级

html

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

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

</div>

<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>

如果这不符合您的需要，请在问题中添加更多信息，说明为什么需要将下拉列表附加到输入元素

编辑：请确保您的JQuery和JQueryUI是最新的，因为JQuerys
offset
函数中存在一些导致错误的不兼容

请看这里：

目前最新版本为：

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

正如您所提到的，自动完成下拉菜单会附加到正文中。因为没有选择权

无论值是多少，如果找不到任何元素，菜单都将显示
附在身体上

通过为
div
提供带有
absolute
位置的选项，可以解决此问题

HTML

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

CSS

appendTo: '#autocomplete-cont',

#autocomplete-cont {
  position: absolute;
}

演示
var strfoods=[“面包”、“牛肉”、“芒果”、“沙拉”、“鸡蛋”、“鸡肉”、“猪肉”、“卡巴格”、“冰淇淋”、“香蕉”、“大米”、“圣诞蛋糕”、“木薯”、“土豆片”、“鸡咖喱”、“牛排三明治”、“烧烤猪肉”、“帕瓦洛娃”、“卡拉马里”、“寿司”、“烤牛肉”、“烤鸭”、“芦笋”]
函数getVectors（VectorTypeID）{
log（“获取向量：”，strfoods）；
$（“#foodautotest”）。自动完成({
附件：“#自动完成续”，
资料来源：strfoods
});
}
getVectors（）
正文{
颜色：#000；
字体系列：Tahoma；
字体大小：15px；
身高：100%；
保证金：0；
填充：0；
位置：绝对位置；
宽度：100%；
溢出：自动；
溢出x：隐藏；
显示：内容；
}
#容器{
显示：网格；
网格模板区域：“固定零件”“移动零件”；
网格模板列：1fr
}
/*容器网格中项目的放置和布局*/
#固定件{
网格区域：固定部分；
显示：网格；
网格模板区域：“主导航”“案例标签”“案例”；
网格模板列：1fr；
位置：固定；
宽度：100%；
z指数：3；
}
#运动部件{
网格区域：运动部件；
显示：网格；
网格模板区域：“面试标签”“面试标签”“面试”“调查信息”；
网格模板柱：450px 1fr；
/*边缘顶端：195px*/
}
@媒体屏幕和屏幕（最大宽度：1280px）{
#运动部件{
网格模板列：350px 1fr
}
}
/*固定零件网格中项目的放置和布局*/
#主导航{
网格区域：主导航；
填充：10px；
显示：网格；
网格模板区域：“按钮形式全屏”；
网格模板列：最大内容最大内容1fr；
栅隙：10px；
背景色：白色；
宽度：99%；
}
#箱形{
显示：网格；
网格模板行：重复（4，自动）；
网格模板区域：“名称”“注释”“导航”“错误”；
}
#卡斯拉贝尔{
网格区域：案例标签；
边框底部：rgb（232、205、201）实心薄
}
#箱形{
网格区域：案例；
填充：0 10px 10px；
}
/*移动零件网格中项目的放置和布局*/
#采访标签{
网格区域：interviewlabel
}
#访谈表{
网格区：访谈；
填充：10px；
显示：网格；
网格模板区域：“date firstname lastname年龄地址电话电子邮件”“gotsick评论”“导航导航导航导航”“错误”；
栅隙：10px；
网格模板柱：1fr 1fr 1fr 2fr 1fr 1fr；
}
#调查{
网格区域：调查；
}
#结果{
网格区域：信息；
}
#调查,，
#结果{
显示：网格；
网格模板区域：“导航”“显示”；
网格模板行：40px 1fr；
}
/*主导航网格中项目的放置和布局*/
#主导航>表单{
网格区域：表格
}
#主导航格式{
显示：无；
网格行间距：10px；
}
}
/*casenamediv和casecommentsdiv网格中项目的放置和布局*/
#案件名称分区p，
#案例评论{
网格区域：标签；
}
#案例名称，
#案例评论{
网格区域：输入；
}
/*调查分区网格中项目的放置和布局*/
#调查员导航{
网格区域：导航；
显示：网格；
网格模板区域：“按钮”“ul”；
网格模板行：40px 1fr；
}
#粉状{
网格区域：显示；
显示：网格；
网格模板区域：“日期时间”“提供商”“食品”“评论”“导航导航”；
网格模板柱：1fr 1fr；
填充：10px；
栅隙：10px；
}
/*米格式网格中项目的放置和布局*/
#米尔达提夫{
网格区域：日期；
显示：网格
}
#进餐时间{
网格区域：时间；
显示：网格
}
#mealproviderdiv{
网格区域：提供者；
网格模板区域：“搜索框”“按钮”；
显示：网格；
}
#食品消费部{
网格区域：食物
}
#我的建议{
网格区域：评论
}
#米尔纳维吉奥{
网格区域：导航
}
/*结束网格设置*/
p{
填充：0；
保证金：0；
}
输入，
文本区{
边界：灰色薄固体；
}
.pac集装箱{
显示：无；
}
/*配色方案*/
卡塞尔先生{
背景色：rgb（232、205、201）
}
.面试官{
背景色：rgb（177188173）
}
博迪科尔先生{
背景色：rgb（24425242）
}
buttoncol先生{
B