title: Two dimensional array and autocomplete
body: <p>I would like to make a form with list of products.</p>
  
  <p>When the user starts typing the product name, autocomplete should show the available options by name (first array element).</p>
  
  <p>When the user chooses a product, the second form control should display a price (second array element).</p>
  
  <p>Here is my code:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>Product name:
  &lt;textarea class="form-control" id="product_name" name="product_name" rows="1" cols="70" placeholder="" type="text" required&gt;&lt;/textarea&gt;
  &lt;br&gt;
  Product price:
  &lt;textarea class="form-control" id="product_price" name="product_price" rows="1" cols="70" placeholder="" type="text" required&gt;
  &lt;/textarea&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$(function() {
      var tagi = [
          ["product_name_1", "10"],
          ["produc_name_2", "20"],
          ["produc_name_3", "20"],
      ];
      $( "#product_name, #product_price" ).autocomplete({
          source: tagi[0,1]
      });
  });
  </code></pre>
  
  <p>...and js fiddle: <a href="http://jsfiddle.net/dNLQa/159/" rel="nofollow noreferrer">http://jsfiddle.net/dNLQa/159/</a></p>
  
  <p>I am trying get this to work but I am stuck. </p>
  
  <p>PS. The array will be generated by PHP, so if this needs to be in a different format I can do that easily.</p>