Автозаполнение jQueryUI: возвращение данных из нескольких столбцов в базе данных MySQL и объединение их

Question

Я довольно новичок в jQuery, jQueryUI и его виджетах.Я решил свои проблемы с виджетом диалога.Последнее, что я могу сделать, это виджет автозаполнения.Чтобы показать вам, где я сейчас нахожусь, вот что у меня есть.

Javascript

$(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 );
                }
            });
        }
    });
});

Файл place.php

<?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);
?>

В настоящее время база данных 1014 * выглядит следующим образом

------------------------------------
|place_id | place_name             |
------------------------------------
|    1    | Chicago, Illinois      |
|    2    | Hillsboro, Illinois    |
|    3    | Jacksonville, Illinois |
------------------------------------

Я бы хотел, чтобы она была более конкретной, чтобы я мог создать страницу, на которой пользователи могут выполнять поиск либогород, штат или оба.Примерно так:

---------------------------------------
|place_id | place_state | place_city  |
---------------------------------------
|    1    | Illinois    | Chicago     |
|    2    | Illinois    | Hillsboro   |
|    3    | Illinois    | Jacksonville|
---------------------------------------

Вопрос : что нужно изменить в файлах javascript и php, чтобы я мог этого достичь?

[РЕДАКТИРОВАТЬ] Я хочу, чтобы он по-прежнему возвращал [Город, штат] со скрытым значением place_id.

Кроме того, любые предложения о том, как лучше реализовать оба, приветствуются.Спасибо.

Answer 1

Для части MYSQL: Вы можете использовать SUBSTRING_INDEX , чтобы разделить ваш текст так, как вы хотите, например:

select place_id,
       substring_index(place_name,',',1) 'Place_State',
       substring_index(place_city,',',-1) 'Place_City' 
from Places     
Where ...

Затем в вашем файле php добавьте новые столбцы place_state и place_city и отформатируйте их в формате json, чтобы впоследствии можно было прочитать их с помощью javascript:

while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
    array_push($return_arr,array('id' => $row['place_id'], 'Place_State' => $row['place_state'], 'Place_City' => $row['Place_City'));
}
mysql_close($conn);
echo json_encode(array("return_arr" => $return_arr));   

Затем используйте javasctipt для форматирования массива json по мере необходимости.хочу вывести его пользователю, например, так:

$("#return_arr").append("<table'><tr>" + /* #return_arr is html element*/
                           "<tr>" + 
                             "<th id='thead'>Place Id</th>" +
                             "<th id='thead'>State</th>" +
                             "<th id='thead'>City</th>" +
                          "</tr>");
$.each(data.return_arr,function(){ 
    var row = "<tr>" +
                 "<td>" + this["id"] + "</td>" +
                 "<td>" + this["Place_State"]   + "</td>" +
                 "<td>" + this["Place_City"]    + "</td>"+
              "</tr>";
    $("#return_arr").append(row);
});
$("#return_arr").append("</table>");

Это всего лишь пример того, как вы можете прочитать массив json и отформатировать его, я не очень хорош в jQuery UI или jQuery Autocomplete, но этоспособ, которым вы можете использовать для вывода своих данных в html div, чтобы ваш Automcomplete отображал данные на нем.

Надеюсь, это поможет вам.