2010-03-29 178 views
18

我相當新的JQuery,也許試圖實現一些初學者可能會更難的東西。不過,我正嘗試創建一個自動完成功能,將當前值發送給PHP腳本,然後返回必要的值。jquery ui自動完成與數據庫

這裏是我的Javascript代碼

$("#login_name").autocomplete({ 
    source: function(request, response) { 
$.ajax({ 
    url: "http://www.myhost.com/myscript.php", 
    dataType: "jsonp", 

    success: function(data) { 
    alert(data); 
    response($.map(data, function(item) { 
     return { 
    label: item.user_login_name, 
    value: item.user_id 
     } 
    })) 
    } 
}) 
    }, 
    minLength: 2 
}); 

這裏是 「myscript.php」

while($row = $Database->fetch(MYSQLI_ASSOC)) 
{ 
    foreach($row as $column=>$val) 
    { 
     $results[$i][$column] = $val; 
    } 
    $i++; 
} 
print json_encode($results); 

將會產生以下輸出

[{"user_id":"2","user_login_name":"Name1"},{"user_id":"3","user_login_name":"Name2"},{"user_id":"4","user_login_name":"Name3"},{"user_id":"5","user_login_name":"Name4"},{"user_id":"6","user_login_name":"Name5"},{"user_id":"7","user_login_name":"Name6"}] 

人的後半段請告訴我哪裏錯了?開始變得非常沮喪。輸入框只是變成「白色」,沒有顯示任何選項。如果我指定一個值的數組,該代碼會工作。

UPDATE 我改變了代碼,仍然沒有運氣。

$("#login_name").autocomplete({ 
    source: "/ajax/login_name.php", 
    dataType: "json", 
    minLength: 2, 
    cache: false, 
    select: function(event, ui) { 
     alert(ui); 
    } 
}); 

使用FireFox的Web開發工具,我收到一個錯誤「b is null」。

+0

只是有一個想法; 「myscript.php」需要發送一個「JSON頭」(如果存在這樣的東西)... – bigstylee 2010-03-29 12:26:23

+0

它似乎沒有得到通過?q =的傳遞參數? – bigstylee 2010-03-29 13:33:33

+0

現在我已經刪除了(isset($ _ GET ['q']))當我使用 $(「#login_name」)時,自動完成了「undefined」選項的自動完成。{//ajax /login_name.php」, 數據類型: 「JSON」, 的minLength:2, 緩存:假, formatItem:功能(數據){ \t返回data.user_login_name; }, formatResult:功能(數據){ \t return data.user_id; } }); – bigstylee 2010-03-29 13:36:26

回答

19

終於找到一個適合我的需要

$("#login_name").autocomplete({ 
    source: function(request, response){ 
    $.post("/ajax/login_name.php", {data:request.term}, function(data){  
     response($.map(data, function(item) { 
     return { 
      label: item.user_login_name, 
      value: item.user_id 
     } 
     })) 
    }, "json"); 
    }, 
    minLength: 2, 
    dataType: "json", 
    cache: false, 
    focus: function(event, ui) { 
    return false; 
    }, 
    select: function(event, ui) { 
    this.value = ui.item.label; 
    /* Do something with user_id */ 
    return false; 
    } 
}); 
4

一些建議:

  1. 爲什麼dataType= "jsop"?它似乎不是jsonp。我想你想要「json」。在選項中也插入cache : false。這確保了請求總是被創建,並且永遠不會滿足瀏覽器端緩存。
  2. 檢查電話是否正在外出,像Fiddler或Charles。
  3. 你的成功是否會被稱爲?那裏有一個alert()。它是否被調用?
  4. 如果你有Firebug或IE8開發者工具,你可以在alert()上加一個斷點來驗證參數的值。
  5. 爲什麼在URL中指定完整的主機名? 昨晚我有一個奇怪的情況與自動完成響應爲空,空字符串,當我使用不同的主機名爲頁面和Ajax請求。當我修改它以使用相同的主機名時,請求成功。實際上,由於具有相同的源策略,您應該在ajax調用的URL中根本沒有主機名。
+0

我正在使用這個腳本http://jqueryui.com/demos/autocomplete/remote-jsonp.html的修改版本,如果我複製並粘貼代碼,它完美的作品。 現在嘗試使用http://jqueryui.com/demosplete/remote.html – bigstylee 2010-03-29 13:22:13

0

甲JSON晶格結構是平坦的字符串,而map預計數組或數組狀結構。在使用map之前在字符串上嘗試json解碼。

+0

btw的修改版本,您將需要添加json或jquery json插件來解碼(據我所知) 。這裏有一些指針:http://groups.google.com/group/jquery-en/browse_thread/thread/c76653b2687a363d?pli=1 – pinaki 2010-03-29 12:35:31

2

是的,你確實需要的頭信息爲您的JSON

 header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); 
     header("Last-Modified: " . gmdate("D, d M Y H:i:s") . "GMT"); 
     header("Cache-Control: no-cache, must-revalidate"); 
     header("Pragma: no-cache"); 
     header("Content-type: text/x-json"); 

tvanfosson使得一個好點緊靠在anycase的插頭

我不認爲你做的Ajax調用插件一樣。

如果你使用jquery-ui autocomple你應該閱讀文檔獲取基本版本運行。你的PHP是罰款除了丟失的報頭數據

+0

您使用「text/x-json」或內容類型。但我認爲json的首選內容類型是「application/json」或「text/javascript」。這就是jQuery 1.4.2在發送json請求時所期望的,這就是標準提出的。 – Cheeso 2010-03-29 13:09:28

+0

我已經添加嘗試所有這些標題的變體,但沒有成功。 – bigstylee 2010-03-29 13:16:47

+0

非常感謝Cheeso – mcgrailm 2010-03-29 13:27:46

0

我有一個問題,太喜歡你的解決方案。現在我修復它。問題是我的服務器返回的json包含語法錯誤。

http://api.jquery.com/jQuery.getJSON/中告訴我們,如果JSON中存在某種錯誤,它將會自動失敗。 JSON必須匹配這裏的JSON標準http://json.org/

對於我的錯誤是我在JSON中的字符串只包裝在一個報價中。但JSON標準只接受用雙引號包裝的字符串。

例如。 「Hello World」不是「Hello World」

當您修復它時,您可以將源設置爲字符串URL。該術語將位於「術語」查詢字符串中。它的工作原理!

+0

不知道這是同一個問題。 @ bigstylee顯示的JSON有雙引號,而不是單引號。 – OnaBai 2012-11-24 23:35:33

2

萬一別人需要它:

在jQuery用戶界面自動完成的文檔指定查詢參數使用的是「長期」而不是「Q」 ......或者至少是現在。

E.g. http://www.myhost.com/myscript.php?term=someToSearchFor 
1

簡單的jquery ui autocomplete,對於那些可能需要它的人。

//select data from the table 
$search = $db->query('SELECT Title from torrents'); 

//then echo script tags and variables with php 
<?php echo '<script type="text/javascript"> 
$(function() { 
    var availableTags = ['; 
foreach ($search as $k) { 
    echo '"'.$k['Title'].'",'; 
} 
    echo ']; 
$("#tags").autocomplete({ 
    minLength:2, //fires after typing two characters 
    source: availableTags 
}); 
}); 
</script>'; 

?> 

HTML表單

<div id="search"> 
<form id="search-form"> 
<input id="tags" type="text" /> 
<input type="submit" value="Search" /> 
</form> 
</div>