JQuery UI Autocomplete，如何遍历其他元素答案

【问题标题】：JQuery UI Autocomplete, how to go over other elementsJQuery UI Autocomplete，如何遍历其他元素
【发布时间】：2020-03-08 23:47:17
【问题描述】：

所以我尝试了两种方法：

<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 以显示元素，如下所示：（忽略它所说的 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;
}

因此，由于我有 600px 的 max-height，如果我不将其附加到任何内容，它将在页面底部创建 600px 的空白空间，即使它在我的下方显示自动完成搜索栏。

【问题讨论】：

什么是catcomplete？另外，您的实际问题/目标是什么？我认为您是说您不想使用appendTo，只需使用正常的下拉菜单即可。如果是这样，则默认情况下可以开箱即用。你不需要任何额外的 CSS，check the examples in the docs。如果这没有帮助，请编辑您的问题并尝试澄清您要做什么。
@Don'tPanic 请在评论前阅读 JQuery UI 文档。 catcomplete 他们图书馆的一部分。
@Dragonsnap 小部件 catcomplete 不是 jQuery UI 库的一部分：jqueryui.com/?s=catcomplete 请提供一个最小的、可重现的示例：stackoverflow.com/help/minimal-reproducible-example

标签： javascript jquery html css jquery-ui

【解决方案1】：

根据您提供的示例，我无法重现您描述的问题。请查看：

$(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>

数据和类别正在按预期加载。如果您需要进一步的帮助，请检查您的代码，检查任何控制台错误，并提供Minimal, Reproducible Example。您的示例不包含任何示例数据。

【讨论】：