title: JQuery Autocomplete - Select Multiple Values From Source
body: <p>I am new to autocomplete.  I am able to get data from an API call and set that as the source, and make autocomplete work on a basic level.  But when I select a value, I also want to be able to:</p>
  
  <ol>
  <li>Display the label in a text input while making the text input value the value of the source.</li>
  <li>Automatically fill in some other inputs.</li>
  </ol>
  
  <p>For example, I have 3 input boxes with the following ids:  customer, customer_number, customer_representative.  I have an API that returns the data in the following json format:</p>
  
  <pre><code>{"request":
     {"request_type":"whatever",
     "response":[
     {
        "customer_id":"123456",
        "customer_name":"TEST CUSTOMER",
        "customer_account":"ABC987",
        "customer_rep_id":"567",
         "customer_rep_id":"John Smith",
     }
     ]
  
     }
  }
  </code></pre>
  
  <p>Here's my code so far:</p>
  
  <pre><code>var url = [API URL W/ PARAMS];
  $.getJSON(url, function(data) 
  {       
      var src = [];
      $.each(data.response, function(index, value) {
          var customer= data.response[index]['customer_name'];
          src.push(customer);
      });     
  
      $( "#customer" ).autocomplete({
          source: src
      });
  }
  </code></pre>
  
  <p>This will enable autocomplete for the customer input box, but the value is the same as the customer name.  After reading through the  official documentation (http://api.jqueryui.com/autocomplete/), it seems that I should be able to use select( event, ui ) to at least populate the other 2 input boxes, but I'm at a loss how.</p>
  
  <p>Any help is greatly appreciated.</p>