jquery-ui 自动完成显示在侧面导航后面

Question

基本上是标题所说的。我在 jquery-ui 自动完成中的搜索下拉列表显示在导航栏后面。

重新创建错误的步骤：1(点击加号按钮2(在搜索栏中输入"A"

这里有一个jsfiddle：https://jsfiddle.net/m5oydqkr/1/

<div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <form role="search">
        <input class="searchbar" id="search" type="text" list="games" placeholder="Search games...">
    </form>
    <hr>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
</div>
<nav class="navbar navbar-expand-lg navbar-dark bg-darkslategrey">
    <a class="navbar-brand font-weight-bold" href="{% url 'home' %}">WTF</a>
    <div class="d-flex order-lg-1 ml-auto pr-2">
        <ul class="navbar-nav flex-row">
          <li class="nav-item text-light">
            <span style="cursor:pointer" onclick="openNav()"><i class="far fa-plus-square fa-lg"></i></span>
          </li>
        </ul>
    </div>
</nav>
<script>
    function openNav() {
        document.getElementById("mySidenav").style.width = "250px";
    }
    function closeNav() {
        document.getElementById("mySidenav").style.width = "0";
    }
</script>
<script>
    $(function() {
        let availableTags = [
          "ActionScript",
          "AppleScript",
          "Asp",
          "BASIC",
          "C",
          "C++",
        ];
    https://jsfiddle.net/m5oydqkr/#
        $("#search").autocomplete({
          source: availableTags,
          focus: function(event, ui) {
            $(this).val(ui.item.label);
            return false;
          },
          select: function(event, ui) {
            window.location.href = ui.item.value;
            $(this).val(ui.item.label);
            return false;
          },
          minLength: 1,
        });
      });
</script>

感谢您的帮助

Answer 1

消息显示在

后面，因为您没有为消息div提供任何类和位置，请将类分配给消息div，并且因为侧中殿栏位置是固定的并且z-index更高，因此您可以添加任何类并应用我的建议CSS来解决问题。

颜色组合是按照我，你可以根据自己的需要进行更改。

Suggested css
.search-result-text{
    position: absolute;
    width: 100%;
    z-index: 9;
    color: #f00;
    background: #000
}

Answer 2

https://jsfiddle.net/kanhasahu/oqrtpaLv/

只有添加 css z-index 才会发现您自动完成结果，结果添加 css 将有助于获得额外的效果。

.ui-autocomplete{ Z指数： 9; }

ul.ui-autocomplete{
  list-style:none inside;
}
.ui-autocomplete{
    position: relative;
    max-width:100%;
    padding:3px 8px;
    border-top:1px solid #333333;
    background:#666666;
    z-index: 9;
    cursor:pointer;
}