title: jQuery Autocomplete using json data
body: <p>I have been banging my head against the wall for hours on this, and I can't seem to figure it out. I have a php file that gets data from a table and converts it into json and displays it like so:</p>
  
  <pre><code>{"id":1,"name":"GR Gas","number":"1","gas":"0.02500000","diesel":"0.03500000"}
  </code></pre>
  
  <p>I have the jQuery UI Autocomplete plugin on another php web page that has this jQuery written:</p>
  
  <pre><code>        $(function () {
  
              $("#customers").autocomplete({
                  source: "../assets/json_clients.php",
                  dataType: 'json',
                  minLength: 2,
                  select: function (event, ui) {
                      $("customer-id").val(ui.item.number);
                  }
              });
          });
  </code></pre>
  
  <p>So far it does it's job, it reads the json, and creates the autocomplete drop down under the textbox and i can click on the item. However it is displaying everything in that dropdown that the json outputs, for example it has GR Gas, 1, etc. I only want it do display the "name". When it is clicked it sets the values of hidden text boxes, can someone point me in the right direction? </p>
  
  <p>Thank you in advance for your help!</p>
  
  <p><em>EDIT</em>
  Here is the PHP that creates the json:</p>
  
  <pre><code>&lt;?php
  
  header('Content-Type: application/json');
  require 'class_dbconnection.php';
  
  $sql = 'SELECT id,c_name,c_number,price_gas,price_distillate FROM mb_clients';
  
  foreach ($Conn-&gt;query($sql) as $row) {
      $result = array('id' =&gt; $row['id'], 'name' =&gt; $row['c_name'], 'number' =&gt; $row['c_number'], 'gas' =&gt; $row['price_gas'], 'diesel' =&gt; $row['price_distillate']);
      echo json_encode($result, JSON_FORCE_OBJECT);
  }
  </code></pre>