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>