JQuery 自动完成下拉菜单位置

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

.html

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

爪哇语

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

该网站使用CCS网格结构

感谢您的帮助

如您所提到的，自动完成下拉菜单将附加到正文。由于没有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;
}

演示

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>

在您发布问题时，我无法复制该问题。我测试了以下代码：

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

这正在按预期工作。

您提到您的页面正在使用 CSS 网格，但您的示例中没有包含任何 CSS。关于appendTo选项，请参阅：

应将菜单附加到哪个元素。当值null时，将检查输入字段的父项是否有一类ui-front。如果找到具有ui-front类的元素，菜单将追加到该元素。无论值如何，如果未找到元素，菜单都将追加到body。

注：当建议菜单打开时，不应更改appendTo选项。

因此，默认情况下，它被附加到带有位置的正文中，因此它显示在输入字段的"下方"。我认为您想附加到父元素，#mealcommentsdiv而不是<input>元素本身。没有办法用你给出的例子来测试这一点，因为它不包含所有正确的元素或样式。

当小部件创建元素时，要显示菜单，因此不能将其附加到输入字段。它可以追加到父级，然后定位为显示在字段下。

我认为甚至不可能在输入元素中渲染元素。如何将输入旁边的下拉列表呈现为同级。

.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",
});

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

编辑：请确保您的JQuery和JQueryUI是最新的，因为有一些不兼容性导致JQuerysoffset功能错误。

看这里： https://github.com/vanderlee/colorpicker/issues/132

目前最新版本是：

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

相关内容

最新更新

热门标签：