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

places.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 值。

此外，我们非常欢迎任何有关如何更好地实现两者的建议。谢谢。

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，但您可以使用这种方式将数据输出到 Automcomplete 将显示的 html div数据。

希望这会对你有所帮助。