title: jQuery UI autocomplete: add a css class to specific items
body: <p>I am using Jquery UI's autocomplete widget and I am fetching the items to display through a callback as described in the reference.</p>
  
  <p>I have a use-case where I need to present some of the items that I retrieve from the server slightly differently than others, so that the user understands there is a difference between these items. In my case, some of the items are 'personal', and some are 'global'. </p>
  
  <p>I would like to let the 'personal' items stand out by adding a CSS class to them so that they have a slightly different background.</p>
  
  <p>Is this possible? I have seen in the reference documentation that an addon exists that allows me to put arbitrary HTML in the 'items', but I feel that is suboptimal when all I really need to do is add a class (in some cases).</p>
  
  <p>I think i would end up with something like this:</p>
  
  <pre><code>$("#myElement").autocomplete({
              //define callback to format results
              source: function(req, add){
                  //pass request to server
                  var baseUrl = '/getItems.php'
                  $.getJSON(baseUrl, req, function(data) {
  
                      //create array for response objects
                      var suggestions = [];
  
                      //process response
                      $.each(data, function(i, val){
                          var entry = new Object();
                          if (val.personal == true){
                          // add some css class somehow?
                          }
                          entry.id = val.id;
                          suggestions.push(entry);
                      });
  
                      //pass array to callback
                      add(suggestions);
                  });
              },
  
          });
  </code></pre>