Блог

В основном то, что говорится в названии. Выпадающий список моего поиска в jquery-отображение автозаполнения пользовательского интерфейса за панелью навигации.

Шаги по воссозданию ошибки: 1) Нажмите кнопку «Плюс» 2) Введите «A» в строке поиска

Вот jsfiddle:https://jsfiddle.net/m5oydqkr/1 /

 <div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">amp;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>
  

Спасибо за помощь

Сообщение, отображаемое сзади, поскольку вы не указываете какой-либо класс и позицию для сообщения div, пожалуйста, присвоите класс сообщению div, а поскольку положение боковой ступицы фиксировано, а z-индекс выше, вы можете добавить любой класс и применить мой предлагаемый css для решения проблемы.

Цветовая комбинация соответствует мне, вы можете изменить в соответствии с вашими потребностями.

 Suggested css

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

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

Только добавление в css z-index только покажет вам результат автозаполнения, результат, добавленный css, поможет получить дополнительный эффект.

.ui-автозаполнение{ 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;
}