Question

我在我的项目中使用jQuery自动完成小部件。希望下拉菜单附加到主体而不是输入附加到主体，效果很好。我的代码如下：

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
        }

    }

});

}

该网站使用ccs网格结构

感谢您的帮助

Answer 1

如前所述，自动完成下拉菜单会附加到正文中。由于缺少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>

Answer 2

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

$(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>元素本身。无法用给定的示例对其进行测试，因为它不包含所有适当的元素或样式。

在小部件创建元素以显示菜单时，不能将其附加到输入字段。可以将其附加到父项，然后放置在该字段下。

Answer 3

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

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是最新的，因为某些不兼容会导致JQuerys offset函数出错。

查看此处：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

jQuery自动完成下拉菜单位置

3 个答案: