JQuery Пользовательский интерфейс автозаполнения, как go над другими элементами - PullRequest
Новая
       13

JQuery Пользовательский интерфейс автозаполнения, как go над другими элементами

0 голосов
/ 09 марта 2020

Итак, я попробовал два метода: 

<div id = "team-search-container">
    <label for="team-search" class = "text-center">
         <input type = "text" id = "team-search">
    </label>
</div>

Если я сделаю это: 

$( "#team-search" ).catcomplete({
    delay: 0,
    source: teamdata,
    appendTo: '#team-search-container'
});

Это расширит div, чтобы показать элементы, например: Image for Description (игнорировать, где написано элементы ComboBox, я хотел написать элементы автозаполнения)

Но если я сделаю что-то подобное, без опции appendTo, 

$( "#team-search" ).catcomplete({
    delay: 0,
    source: teamdata
});

Он будет работать нормально, но в конце body он сделает пустое пространство равным высоте автозаполнения. Вот мой CSS: 

.ui-autocomplete{
    position: relative;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 20px;
}

.ui-autocomplete-category{
    font-size: 18px;
    list-style: none;
    width: 200px;
}

.ui-menu-item{
    list-style: none;
    width: 200px;
    cursor: default;
    background-color: #565656;
}

.ui-helper-hidden-accessible {
    display: none;
}

Так как у меня есть max-height из 600px, он создаст 600px пустого пространства внизу страницы, если я не добавлю это ни к чему, даже если оно показывает автозаполнение прямо под моей строкой поиска.

1 Ответ

0 голосов
/ 11 марта 2020

В приведенном вами примере мне не удалось воспроизвести проблему, как вы ее описали. Пожалуйста, просмотрите: 

$(function() {
  $.widget("custom.catcomplete", $.ui.autocomplete, {
    _create: function() {
      this._super();
      this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
    },
    _renderMenu: function(ul, items) {
      var that = this,
        currentCategory = "";
      $.each(items, function(index, item) {
        var li;
        if (item.category != currentCategory) {
          ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
          currentCategory = item.category;
        }
        li = that._renderItemData(ul, item);
        if (item.category) {
          li.attr("aria-label", item.category + " : " + item.label);
        }
      });
    }
  });
  
  var data = [{
      label: "anders",
      category: ""
    },
    {
      label: "andreas",
      category: ""
    },
    {
      label: "antal",
      category: ""
    },
    {
      label: "annhhx10",
      category: "Products"
    },
    {
      label: "annk K12",
      category: "Products"
    },
    {
      label: "annttop C13",
      category: "Products"
    },
    {
      label: "anders andersson",
      category: "People"
    },
    {
      label: "andreas andersson",
      category: "People"
    },
    {
      label: "andreas johnson",
      category: "People"
    }
  ];

  $("#team-search").catcomplete({
    delay: 0,
    source: data,
    appendTo: '#team-search-container'
  });
});
.ui-autocomplete {
  position: relative;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 20px;
}

.ui-autocomplete-category {
  font-size: 18px;
  list-style: none;
  width: 200px;
}

.ui-menu-item {
  list-style: none;
  width: 200px;
  cursor: default;
  background-color: #565656;
}

.ui-helper-hidden-accessible {
  display: none;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="team-search-container">
  <label for="team-search" class="text-center"><input type = "text" id = "team-search" /> </label>
</div>

Данные и категории загружаются, как ожидается. Если вам нужна дополнительная помощь, просмотрите ваш код, проверьте на наличие ошибок консоли и предоставьте Минимальный воспроизводимый пример . Ваш пример не включал никаких примеров данных.

...