title: jQuery - Use key/value pair in autocomplete
body: <p>In my ASP MVC view, I am passing a key/value pair back from the controller. After looking at fiddler and viewing in Chrome's debugger I can see that the information is being passed back correctly. </p>
  
  <p>I would like for the <code>value</code> of the key/value pair to be the item that is displayed in the <code>autocomplete</code> list. When the user selects an item from the list, I would like that item's <code>key</code> to be placed into the text box. </p>
  
  <p>Here is the jQuery code from my view</p>
  
  <pre><code>$(function () {
      $('#DRMCompanyId').autocomplete({
          source: '@Url.Action("compSearch", "AgentTransmission")',
          minLength: 2,
          select: function (event, ui) {
              $('#DRMCompanyId').val(ui.item.label);
          }
      });
  });
  </code></pre>
  
  <p>One thing I noticed - if I add the <code>ui</code> variable to the watch list in the browser's debugger I notice that the label and the value are the exact same. Again, however, I'm seeing that what's being returned is the complete key/value pair.</p>
  
  <p>Here is a screen shot of the Network/Response console after the search is complete. Some of the data is private so I blacked it out however you can see there is a key/value pair being returned. </p>
  
  <p><img src="https://i.stack.imgur.com/jRqM5.png" alt="enter image description here"></p>