How to make jQuery UI autocomplete dropdown ul list item selectively disabled
<p>The dropdown <code>classes</code> are <code>ul.ui-autocomplete li.ui-menu-item</code> by default. I want to make the unselectable <code>li</code> 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 <code>.attr('disabled', ture);, .prop('disabled', true);</code> and <code>user-select: none;</code> none of them is working. It just adds <code>disabled="disabled"</code> to the <code>li</code>, and it is still selectable. Is there a disabled property in jQuery UI I can attach it onto the li to accomplish this?</p>

<pre><code>&lt;ul class="ui-autocomplete"&gt;
 &lt;li class="unselectable" &gt;Mens Suggestions&lt;/li&gt;
 &lt;li&gt;Jacket&lt;/li&gt;
 &lt;li class="unselectable" &gt;Women Suggestions&lt;/li&gt;
 &lt;li&gt;Sweater&lt;/li&gt; 
&lt;/ul&gt;
</code></pre>