Question

我在使用自动填充类别然后添加垂直滚动条时遇到问题。当列表短于最大高度时，滚动条不会像预期的那样显示。但是当选择列表中的最后一项时，会出现滚动条。

JSFiddle example（在演示页面右侧，在输入中输入“a”）

关于如何解决这个问题的任何线索？

$.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" }
];

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

Answer 1

自己解决了。 ul元素上的一点点填充就可以了。

带有类别和滚动条的JQuery UI自动完成功能

1 个答案: