0

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>
7537247
  • 303
  • 5
  • 19
  • Did you even bother to google this? – Robert Sep 11 '16 at 02:34
  • Possible duplicate of [Disable/enable an input with jQuery?](http://stackoverflow.com/questions/1414365/disable-enable-an-input-with-jquery) – Robert Sep 11 '16 at 02:34
  • @Robert, I did google, tried everything I could found on Google(I might miss something) . And, like what I said in the description, `.attr('disabled', true);` doesn't work. – 7537247 Sep 11 '16 at 04:10
  • additional comments: `.prop('disabled', true)` doesn't work either. – 7537247 Sep 11 '16 at 04:22
  • You want to follow this example: https://jqueryui.com/autocomplete/#categories – Twisty Sep 14 '16 at 16:34

1 Answers1

1

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
  });
});
Twisty
  • 30,304
  • 2
  • 26
  • 45
  • I found this post as well, thought about using it. But, it completely changed the structure of my markup. Anyway, I am going to give a try. Thanks. – 7537247 Sep 14 '16 at 16:56
  • You did not include any of your markup, nor did you include an example of your code or data, so there was no way to know that when addressing your question. – Twisty Sep 14 '16 at 16:59