jQueryUI Autocomplete:从MySQL数据库中的多个列返回数据并连接它们 - jQueryUI Autocomplete: Returning data from multiple columns in a MySQL database and joining them

我是jQuery、jQueryUI及其小部件的新手。我已经解决了对话框小部件的问题。在我继续之前的最后一件事是Autocomplete小部件。为了向您展示我目前的进度，以下是我到目前为止所做的。

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

文件存放。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);
?>

当前，数据库看起来像这样

------------------------------------
|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文件，所以我可以实现这一点?

[编辑]我希望它仍然返回[City, State]，并隐藏place_id值。

同样，任何关于如何更好地实现两者的建议都是非常受欢迎的。谢谢。

对于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自动完成，但这是你可以使用的方式来输出你的数据到htmldiv，你的自动完成将显示在它的数据。