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/kaslab/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;
}

jQuery UI自动完成显示在侧面导航后面

2 个答案: