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文件，所以我可以做到這一點？

[編輯] 我希望它仍然返回隱藏place_id值的[City，State]。

此外，有關如何更好地實施兩者的任何建議都是值得歡迎的。謝謝。

Answer 1

爲MySQL部分：您可以使用SUBSTRING_INDEX來分割你的文字，你想要LIK此：

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用戶界面或jQuery的自動完成功能，但這種方式您可以使用將您的數據輸出到您的Automcomplete將在其上顯示數據的html div。

希望這會幫助你。