jqueryjquery-uidrop-down-menujquery-ui-autocompletejquery-widgets

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


The dropdown classes are ul.ui-autocomplete li.ui-menu-item by default. I want to make the unselectable li not selectable for better UX. i.e. If I enter keywords "coat" in the search bar, it shows Mens Suggestions, then Jacket, then Women Suggestions, then Sweater. When I use arrow keys to select them, it skips the Suggestions part. I have tried .attr('disabled', ture);, .prop('disabled', true); and user-select: none; none of them is working. It just adds disabled="disabled" to the li, and it is still selectable. Is there a disabled property in jQuery UI I can attach it onto the li to accomplish this?

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

Solution

  • The short answer is to set the class to ui-autocomplete-category as shown in the example from https://jqueryui.com/autocomplete/#categories

    Working example: 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
      });
    });