jquery ui自動完成與數據庫

我相當新的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」。

來源

2010-03-29 bigstylee

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

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

現在我已經刪除了（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

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

$("#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; 
    } 
});

來源

2010-03-29 16:17:30 bigstylee

一些建議：

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

來源

2010-03-29 12:31:23 Cheeso

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

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

來源

2010-03-29 12:32:56 pinaki

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

是的，你確實需要的頭信息爲您的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是罰款除了丟失的報頭數據

來源

2010-03-29 12:36:12 mcgrailm

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

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

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

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

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

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

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

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

來源

2011-04-12 06:52:18

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

萬一別人需要它：

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

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

來源

2011-07-21 12:32:51 CodeReaper

簡單的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>

來源

2014-07-12 20:46:51

jquery ui自動完成與數據庫

回答

相關問題