title: Select jQuery autocomplete value by its id
body: <p>I have 2 text box with jquery autocomplete. My requirement is</p>
  
  <p>If i select <code>Text Box 1</code> label or value <code>aa</code> and its id is <code>1</code>, then in <code>Text Box 2</code> label or value which contain id as <code>1</code> that is <code>(aa1)</code> should be selected.</p>
  
  <p>I don't want to copy value or match value in <code>Text Box 1</code> to <code>Text Box 2</code> or vice  versa. </p>
  
  <p>And also i want to know <code>how to select autocomplete value by passing its id?</code></p>
  
  <p><strong>Example :</strong></p>
  
  <p>If i select <code>bb</code> (id=2) in Text Box 1 then <code>bb1</code> (id=2) in text Box 2 should be selected.</p>
  
  <p>If i select <code>cab1</code> (id=5) in Text Box 2 then <code>cab</code> (id=5) in text Box 1 should be selected.</p>
  
  <p><strong><a href="http://jsfiddle.net/lakshmanakumar/GXwwg/" rel="nofollow">Fiddle Demo</a></strong></p>
  
  <p><strong>My HTML and jQuery</strong></p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML5//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link href="css/jquery-ui-start-custom-1.10.3.css" rel="stylesheet" type="text/css" /&gt;
      &lt;script src="scripts/jquery-1.10.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="scripts/jquery-ui-custom-1.10.3.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(document).ready(function() {
  
              var arraytxt1 = [{ id: 1, label: "aa" }, { id: 2, label: "bb" }, { id: 3, label: "bbbb" }, { id: 4, label: "abab" }, { id: 5, label: "cab"}];
  
              $("#txt1").autocomplete({
                  source: arraytxt1,
                  minLength: 1,
                  select: function(event, ui) {
                      //$("#txt2").val(ui.item.label);
                      // Corresponding Text Box 2 value to selected.
                  }
              });
  
              var arraytxt2 = [{ id: 1, label: "aa1" }, { id: 2, label: "bb1" }, { id: 3, label: "bbbb1" }, { id: 4, label: "abab1" }, { id: 5, label: "cab1"}];
  
              $("#txt2").autocomplete({
                  source: arraytxt2,
                  minLength: 1,
                  select: function(event, ui) {
                     // Corresponding Text Box 1 value to selected.
                  }
              });
  
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div&gt;
          Text Box 1
          &lt;input type="text" id="txt1" /&gt;
          Text Box 2
          &lt;input type="text" id="txt2" /&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>