Как сделать jQuery пользовательский интерфейс автозаполнения выпадающего списка ul элемент списка выборочно отключен

Question

Выпадающий список classes - ul.ui-autocomplete li.ui-menu-item по умолчанию. Я хочу сделать unselectable li недоступным для лучшего UX. т. е. если я вводю ключевые слова «пальто» в строке поиска, он показывает предложения для мужчин, затем куртку, затем предложения женщин, а затем свитер. Когда я использую клавиши со стрелками для их выбора, он пропускает часть «Предложения». Я пробовал .attr('disabled', ture);, .prop('disabled', true); и user-select: none; ни один из них не работает. Он просто добавляет disabled="disabled" в li, и он по-прежнему можно выбрать. Есть ли отключенное свойство в 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

Короткий ответ, чтобы установить класс для 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 
    }); 
});