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关于它的数据。

希望这会对你有所帮助。

jQueryUI自动完成：从MySQL数据库中的多个列返回数据并加入它们

1 个答案: