與MySQL數據庫的jQuery UI自動完成

我正在努力與jQuery自動完成整天。我無法弄清楚如何將jQuery UI自動完成與mysql數據庫連接起來。我不知道PHP文件應該是什麼樣子，如何請求發送到PHP等。在jQuery網站上的演示和文檔中有一個簡單的例子，遠程數據源的源代碼是：source：「search.php」。那麼search.php如何知道我在輸入框中輸入的內容？有沒有查詢附加到search.php：/我注意到，json被使用..我很困惑，我已經嘗試過沒有結果的打法。我需要的是簡單的自動填充，包含我輸入到文本框中的文本的城市名稱。與MySQL數據庫的jQuery UI自動完成

我的數據庫看起來像：

table_cities: 
------------- 
id: -city id 
name: -city name

，我需要自動完成給我看城市包含文字我已經輸入到文本框，例如

「寶」將導致「利物浦」，「朴茨茅斯」 ......

html 
---- 
<input type="text" id="cities" /> 

js 
-- 
$("#cities").autocomplete({ 
...

謝謝！

來源

2012-01-16 woopata

你只需要返回一個JSON編碼的id/value對象數組。自動完成插件還會發送一個名爲「q」的get參數，其中包含當前輸入框中的內容。一個search.php文件的一個簡單的例子，將工作：

$autocomplete_value = mysql_real_escape_string($_GET["q"]); 
$sql = "select id, name from table_cities where name LIKE '%$autocomplete_value%'"; 
$query = mysql_query($sql); 

$results = array(); 
while ($row = mysql_fetch_array($query, MYSQL_ASSOC)) { 
    array_push($results, array('id' => $row['id'], 
           'value' => $row['name'])); 
} 
echo json_encode($results);

你需要的是適應任何PHP框架，你可能會使用，但是模式應該是相同的 - 遍歷結果創建數組'id'和'value'對象，然後json編碼。

編輯：您可能想要更新SQL以執行小寫比較（因此忽略大小寫）等其他此類增強功能，但這至少應使您朝着正確的方向前進。

來源

2012-01-16 18:24:54 Parrots

謝謝，這解決了一半的問題，我didn不知道這個請求是通過名爲「q」的參數發送的，其他一半的問題是jQuery ..當我用簡單的jQuery使用你的php代碼時，返回的是所有城市，而不僅僅是匹配城市：$（「#cities」）。自動完成（{ 源：「腳本/ loc.php」，的minLength：4，選擇：功能（事件，UI）{ 警報（ui.item.id）; } }）; – woopata 2012-01-16 18:49:05

查看Firebug for Firefox或使用Safari/Chrome內置的開發模式 - 非常適合調試ajax調用並查看發送到/來自服務器的內容。 – Parrots 2012-01-16 18:51:13

我還沒有使用過jQuery的自動完成功能，但看起來很清楚，它會將AJAX調用回您的Web服務器，提供已經在框中鍵入的數據。 Web服務器將按照您認爲合適的方式查詢數據庫，並返回應顯示的結果。

該查詢不會成爲jQuery插件的一部分;你必須自己寫。

來源

2012-01-16 18:12:52

是的，我看到在一些例子中使用了ajax（$ .ajax ..），但我不明白它在jQuery UI演示和文檔 - >遠程數據源中如何工作。當你點擊查看該示例的源代碼時，只有源代碼：「」search.php「沒有$ .ajax .. – woopata 2012-01-16 18:23:34

我想'search.php'接受一個表單值;當調用php文件時，它抓住表單值，查詢數據庫，並返回一個結果集給調用者（在本例中爲插件），然後顯示結果。這部分是你有困難？ – 2012-01-16 18:35:25

與MySQL數據庫的jQuery UI自動完成

回答

相關問題