你好,我遵循了本教程,其中使用了jQuery UI来生成令牌facebook,例如:http : //net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui- autocomplete-widget/
我的问题是我需要通过Json传递两个值:ID和NAME:服务器端脚本如下所示:
header('Content-Type: text/html; charset=iso-8859-1', true); include($_SERVER['DOCUMENT_ROOT'].'/inrees/inrees/communaute/includes/_db.php'); $param = $_GET["term"]; $query = mysql_query("SELECT * FROM comm_carnet, in_emails WHERE carnet_iduser=emails_id AND emails_id!='".$_COOKIE['INREES_ID']."' AND emails_nom REGEXP '^$param'"); //build array of results for ($x = 0, $numrows = mysql_num_rows($query); $x < $numrows; $x++) { $row = mysql_fetch_assoc($query); $friends[$x] = array("name" = > $row["emails_nom"], "id" = > $row["emails_id"]); } //echo JSON to page $response = $_GET["callback"]."(".json_encode($friends).")"; echo $response;
服务器端脚本的回显为:
([{"name":"dupont","id":"34998"},{"name":"castro","id":"34996"},{"name":"castelbajac","id":"34995"}])
(这正是我所需要的)
现在,我正在传递“名称”数组,但不需要传递“ id”,它需要是数据库中具有相应ID的隐藏输入,对php进行调用的html页面如下所示:
//attach autocomplete $("#to").autocomplete({ //define callback to format results source: function (req, add) { //pass request to server $.getJSON("messages_ajax.php?callback=?", req, function (data) { //create array for response objects var suggestions = []; //process response $.each(data, function (i, val) { suggestions.push(val.name); }); //pass array to callback add(suggestions); }); }, //define select handler select: function (e, ui) { //create formatted friend var friend = ui.item.value, span = $("<span>").text(friend), a = $("<a>").addClass("remove").attr({ href: "javascript:", title: "Remove " + friend }).text("x").appendTo(span); $("<input />", { value: "id", type: "hidden", name: "id" }).appendTo(span); //add friend to friend div span.insertBefore("#to"); }, //define select handler change: function () { //prevent 'to' field being updated and correct position $("#to").val("").css("top", 2); } }); //add click handler to friends div $("#friends").click(function () { //focus 'to' field $("#to").focus(); }); //add live handler for clicks on remove links $(".remove", document.getElementById("friends")).live("click", function () { //remove current friend $(this).parent().remove(); //correct 'to' field position if ($("#friends span").length === 0) { $("#to").css("top", 0); } });
基本上就是您看到评论的地方:"//define select handler" 需要做点什么,但是我做不到!我添加了一行:
"//define select handler"
$("<input />", {value:"id", type:"hidden", name:"id"}).appendTo(span); 但它不会获取我的数组“ id”,因此不提供任何帮助。
$("<input />", {value:"id", type:"hidden", name:"id"}).appendTo(span);
问候
您的代码应为:
*用 演示 *更新
$(function() { $("#to").autocomplete({ //define callback to format results source: function(req, add) { //pass request to server $.getJSON("json.json", req, function(data) { add($.map(data, function(item) { return { id: item.id, label: item.name, value: item.name } })); }); }, //define select handler select: function(e, ui) { $('<a class="del_friend" href="#' + ui.item.id + '" title="remove">' + ui.item.label + '<span>x</span>' + '<input name="friend[]" type="hidden" id="friend_' + ui.item.id + '" value="' + ui.item.id + '" /></a>').insertBefore('#to'); }, //define select handler change: function() { $("#to").val(""); } }); //delete friends $('a.del_friend').live('click', function(e) { e.preventDefault(); var friend_id = this.hash.split('#')[1]; alert(friend_id); //AJAX Call and delete item by it's ID $(this).fadeOut(500).remove() }); });
[{{name“:” dupont“,” id“:” 34998“},{” name“:” castro“,” id“:” 34996“},{” name“:” castelbajac“,” id“: “ 34995”}]