时间戳

首页 > 解决方案 > JQuery UI Autocomplete，如何遍历其他元素

javascript - JQuery UI Autocomplete，如何遍历其他元素

问题描述

所以我尝试了两种方法：

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

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

标签： javascriptjqueryhtmlcssjquery-ui

解决方案

使用您提供的示例，我无法按照您的描述复制该问题。请查阅：

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

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

推荐阅读