title: jQueryUI Autocomplete: Returning data from multiple columns in a MySQL database and joining them
body: <p>I am fairly new with jQuery, jQueryUI and its widgets. I've solved my problems with the dialog widget. One last thing before I can move on is the Autocomplete widget. To show you where I'm currently at, here's what I have so far.</p>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>$(document).ready(function() {
      var cache = {},
          lastXhr;
      $( "#place" ).autocomplete({
          minLength: 2,
          select: function(event, ui) {
                  $('#placed_id').val(ui.item.id);
              },
          source: function( request, response ) {
              var term = request.term;
              if ( term in cache ) {
                  response( cache[ term ] );
                  return;
              }
  
              lastXhr = $.getJSON( "/database/places.php", request, function( data, status, xhr ) {
                  cache[ term ] = data;
                  if ( xhr === lastXhr ) {
                      response( data );
                  }
              });
          }
      });
  });
  </code></pre>
  
  <p><strong>The file places.php</strong></p>
  
  <pre><code>&lt;?php
  $dbhost = 'localhost';
  $dbuser = 'abc123';
  $dbpass = 'abc123';
  $dbname = 'test';
  
  $conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql');
  mysql_select_db($dbname);
  
  $return_arr = array();
  
  if ($conn)
  {
      $fetch = mysql_query("SELECT * FROM places where place_name like '%" . mysql_real_escape_string($_GET['term']) . "%' ORDER BY LENGTH(place_name) ASC"); 
  
      while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
          $row_array['id'] = $row['place_id'];
          $row_array['value'] = $row['place_name'];
          array_push($return_arr,$row_array);
      }
  }
  mysql_close($conn);
  echo json_encode($return_arr);
  ?&gt;
  </code></pre>
  
  <p>Currently, the <strong>database</strong> looks like this</p>
  
  <pre><code>------------------------------------
  |place_id | place_name             |
  ------------------------------------
  |    1    | Chicago, Illinois      |
  |    2    | Hillsboro, Illinois    |
  |    3    | Jacksonville, Illinois |
  ------------------------------------
  </code></pre>
  
  <p>I would want it to be more specific so I could make page where users can search either by the city, state, or both. Something like this:</p>
  
  <pre><code>---------------------------------------
  |place_id | place_state | place_city  |
  ---------------------------------------
  |    1    | Illinois    | Chicago     |
  |    2    | Illinois    | Hillsboro   |
  |    3    | Illinois    | Jacksonville|
  ---------------------------------------
  </code></pre>
  
  <p><strong>Question is</strong>: What needs to be changed on both the javascript and php files so I could achieve this? </p>
  
  <p>[EDIT]
  I want it to still return [City, State] with the place_id value hidden.</p>
  
  <p>Also, any suggestions on how to better implement both are more than welcome. Thanks.</p>