title: jQuery UI Autocomplete pass additional data on request/response
body: <p>I'm using jQ UI Autocompletebox widget.</p>
  
  <p>Here's the jQ that utilizes the ACB:</p>
  
  <pre><code>$('.drug-name').autocomplete({
    source: function (request, response) {
      $.ajax('/Drugs/JsonIndex/',
        {
          dataType: 'json',
          data: { searchBy: request.term },
          success: function (data) {
            response($.map(data, function (item) {
              return { value: item.Name, label: item.Name };
              /*1****************/
            }));
          },
          select: function (event, ui) {
              /*2****************/
          },
          messages: {
            noResults: '',
            results: ''
          },
          _renderItem: function (ul, item) {
              /*3****************/ 
            return $('&lt;li&gt;')
                      .html(item.label)
                      .prop('title', item.description)
                      .data('drug-id', item.value)
                      .appendTo(ul);
          }
        });
    }
  });
  </code></pre>
  
  <p>I've marked those spots I'd like to talk about:</p>
  
  <ol>
  <li>The <code>data</code> argument received from the request contains the properties <code>Id</code>, <code>Name</code> and <code>Description</code>. I want the generated <code>li</code>s to use the <code>Name</code> as display value, the <code>Description</code> as tooltip (<code>title="Description"</code>), and the <code>Id</code> to be set to an additional data field</li>
  <li>When an element is then selected, I want to set a hidden field with the selected item's Id</li>
  <li>I thought about setting it with this function but first I can't figure a way to pass another structure other than jQ's normalized value and label one.</li>
  </ol>