如何使 jQuery UI 自动完成下拉 ul 列表项有选择地禁用

Question

下拉列表 classes 默认为 ul.ui-autocomplete li.ui-menu-item。我想让 unselectable li not selectable 以获得更好的用户体验。即，如果我在搜索栏中输入关键字 "coat"，它会显示男装建议，然后是夹克，然后是女装建议，然后是毛衣。当我使用箭头键 select 它们时，它会跳过建议部分。我试过 .attr('disabled', ture);, .prop('disabled', true); 和 user-select: none; none 是有效的。它只是将 disabled="disabled" 添加到 li，它仍然是 selectable。 jQuery UI 中是否有禁用的属性我可以将其附加到 li 上以完成此操作？

<ul class="ui-autocomplete">
 <li class="unselectable" >Mens Suggestions</li>
 <li>Jacket</li>
 <li class="unselectable" >Women Suggestions</li>
 <li>Sweater</li> 
</ul>

Answer 1

简短的回答是将 class 设置为 ui-autocomplete-category，如 https://jqueryui.com/autocomplete/#categories

中的示例所示

工作示例：https://jsfiddle.net/Twisty/183he51q/

HTML

<label for="search">Search: </label>
<input id="search">

CSS

.ui-autocomplete-category {
  font-weight: bold;
  padding: .2em .4em;
  margin: .8em 0 .2em;
  line-height: 1.5;
}

jQuery

$(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: "Jacket",
    category: "Mens Suggestions"
  }, {
    label: "Sweater",
    category: "Mens Suggestions"
  }, {
    label: "Jacket",
    category: "Women Suggestions"
  }, {
    label: "Sweater",
    category: "Women Suggestions"
  }];

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

如何使 jQuery UI 自动完成下拉 ul 列表项有选择地禁用

How to make jQuery UI autocomplete dropdown ul list item selectively disabled

jquery

jquery-ui

jquery-ui-autocomplete

jquery-widgets

drop-down-menu