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
}