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="ui-menu-item unselectable" >Mens Suggestions</li> <li>Jacket</li> <li class="unselectable" >Women Suggestions</li> <li>Sweater</li> </ul>