title: jQuery UI Autocomplete - Conditional style on drop down
body: <p>I have two JQuery autocomplete's on a screen. One is mandatory, the other is not.</p>
  
  <p>I have some javascript which sets them up slightly differently.</p>
  
  <p>The problem I have is styling the drop down with a 'mandatory' css class to make it show up as mandatory visually (to non-visually impared users...)</p>
  
  <p>I have styled the input box that is created, that's not a problem.</p>
  
  <pre><code>(function ($) {
              $.widget("ui.comboboxMan", {
                  _create: function () {
                      var self = this,
                      select = this.element.hide(),
                      selected = select.children(":selected"),
                      value = selected.val() ? selected.text() : $("#PickListSessionDefault").val()
                      var input = this.input = $("&lt;Input&gt;")
                      .addClass("ui-textbox")
                      .addClass("mandatory")
                      .insertAfter(select)
                      .val(value) 
  </code></pre>
  
  <p>But I want to add the same madatory class to the pick list.</p>
  
  <p>I tried this:</p>
  
  <pre><code>                    open: function (event, ui) {
                          $('ul.ui-autocomplete').addClass('mandatory');
                          $('ul.ui-autocomplete li').addClass('mandatory');
                      },  
  </code></pre>
  
  <p>But that results in some of the items not having the background over the WHOLE width. there is a thin strip of white to the left and a thicker one to the right. CSS is:</p>
  
  <pre><code>.mandatory
  {
      background-color: #b9ffb9;
  }
  </code></pre>
  
  <p>Suggestions?</p>