Question

我正在尝试在表单项中实现自动完成，在用户输入时，它会创建一个下拉菜单，其中包含可单击的建议列表。这是在Ionic Framework内完成的。

我已经制作了一个代码来展示我想要的东西。（查看自动完成字段，以及它下面的灰色隐藏框）

我的下拉菜单：

<div class="list">
  <label class="item item-input item-stacked-label">
    <span class="input-label">License #</span>
    <input type="text" placeholder="AUTO COMPLETE FIELD">
    <div class="input-dropdown">
      <ul class="input-dropdown-menu">
        <li>...</li>
      </ul>
    </div>
  </label>
</div>

我的CSS：

.input-dropdown {
    position: absolute;
    background: grey;
    border: solid 1px #000;
    z-index: 1001;
    overflow: visible;
}

.input-dropdown-menu {
}

这个问题是position: absolute不允许我覆盖自动填写字段下方的列表项，正如您在codepen中看到的那样。

Here's an example of a solution，由于某种原因不适合我。

有没有人知道如何实现此下拉列表覆盖它的父级？

Answer 1

标签项溢出被隐藏，下拉列表位于其中，因此您无法看到它。

Answer 2

// jquery code

$(document).ready(function() {
$("#test").focus(function(){
    $(".input-dropdown-menu").show();
});
$("#test").mouseleave(function(){
    $(".input-dropdown-menu").hide();
});
});


 //use css 

input-dropdown {
position: absolute;
background: grey;
border: solid 1px #000;
z-index: 1001;
overflow: visible;
margin-left:65px;
}

.input-dropdown-menu {
display:none;
}


 //use html


<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">License #</span>
<input type="text" placeholder="AUTO COMPLETE FIELD" id ="test">
<div class="input-dropdown">
  <ul class="input-dropdown-menu">
    <li>111</li>
    <li>111</li>
    <li>111</li>
  </ul>
</div>

在列表项中叠加div

2 个答案: