Javascript jqueryui令牌_Javascript_Jquery_Ajax_Jquery Ui_Jsonp

Javascript jqueryui令牌

javascript jquery ajax jquery-ui

Javascript jqueryui令牌,javascript,jquery,ajax,jquery-ui,jsonp,Javascript,Jquery,Ajax,Jquery Ui,Jsonp,我遵循了本教程，该教程使用jQuery UI生成Facebook令牌，如：我的问题是我需要通过JSON传递两个值：ID和名称。服务器端脚本如下所示： header('Content-Type: text/html; charset=iso-8859-1', true); include($_SERVER['DOCUMENT_ROOT'].'/inrees/inrees/communaute/includes/_db.php'); $param = $_GET["term&quo

我遵循了本教程，该教程使用jQuery UI生成Facebook令牌，如：

我的问题是我需要通过JSON传递两个值：ID和名称。服务器端脚本如下所示：

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;

//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);
    }
});

var friendName = ui.item.value.name;
var friendID = ui.item.value.id;

（这正是我需要的）

我传递的是“name”数组，而不是“id”，该“id”需要是数据库中相应id的隐藏输入，调用php的html页面如下所示：

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;

//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);
    }
});

var friendName = ui.item.value.name;
var friendID = ui.item.value.id;

//附加自动完成
$（“#到”）。自动完成({
//定义回调以格式化结果
来源：功能（请求、添加）{
//将请求传递给服务器
$.getJSON（“messages\u ajax.php？callback=？”，req，函数（数据）{
//为响应对象创建数组
var建议=[]；
//过程响应
$。每个（数据、函数（i、val）{
建议。推送（val.name）；
});
//将数组传递给回调函数
增加（建议）；
});
},
//定义选择处理程序
选择：功能（e、ui）{
//创建格式化的朋友
var friend=ui.item.value，
span=$（“”）。文本（朋友），
a=$（“”）.addClass（“删除”）.attr({
href:“javascript:”，
标题：“删除”+好友
}).文本（“x”）。附录（span）；
$("", {
值：“id”，
类型：“隐藏”，
姓名：“id”
}).附录（span）；
//将好友添加到好友div
span.插入前（“#至”）；
},
//定义选择处理程序
更改：函数（）{
//防止“to”字段被更新并纠正位置
$（“#至”）.val（“”.css（“顶部”，2）；
}
});
//将单击处理程序添加到friends div
$（“#朋友”）。单击（函数（）{
//焦点“到”字段
$（“#to”）.focus（）；
});
//为删除链接上的单击添加活动处理程序
$（“.remove”，document.getElementById（“朋友”））.live（“单击”，函数（）{
//删除当前好友
$（this.parent（）.remove（）；
//纠正“至”字段位置
如果（$（“#朋友跨度”）.length==0）{
$（“#至”）.css（“顶部”，0）；
}
});

因此，基本上就是您看到注释的地方：

“//定义选择处理程序”

，即需要做一些事情，但我做不到

我加了一句话：

$（“”，{value:“id”，类型：“hidden”，名称：“id”}）
但是它不会获取我的数组“id”。
因此，看起来您只是将名称
添加到建议列表中，而不是将包含名称
和id
成员的整个数据
对象。而不是这样做：
suggestions.push(val.name)

尝试将整个数据对象推送到要传递给回调的列表上：
suggestions.push(val)

然后，在回调中，ui.item.value
将包含完整的数据成员，因此您需要稍微更改代码。要分别访问name
和id
值，您可能需要执行以下操作：
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;

//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);
    }
});

var friendName = ui.item.value.name;
var friendID = ui.item.value.id;

然后，您可以在需要的地方使用这些变量（friend
变成friendID
，而不是将{value:“id”…}
传递给隐藏的输入，您可以执行{value:friendID…}
您的代码应该是：
使用更新
$（函数（）{
$（“#到”）。自动完成({
//定义回调以格式化结果
来源：功能（请求、添加）{
//将请求传递给服务器
$.getJSON（“json.json”，req，
功能（数据）{
添加（$.map）（数据，
职能（项目）{
返回{
id:item.id，
标签：item.name，
值：item.name
}
}));
});
},
//定义选择处理程序
选择：功能（e、ui）{
$（''）.insertBefore（'#to'）；
},
//定义选择处理程序
更改：函数（）{
$（“#至”）.val（“”）；
}
});
//删除好友
$（'a.delu friend'）.live（'click'，函数（e）{
e、 预防默认值（）；
var friend_id=this.hash.split（“#”）[1]；
alert（friend_id）；//AJAX调用并按其id删除项
$（此）.fadeOut（500）.remove（）
});
});


注意：假设您的json代码如下所示：
[{“姓名”：“杜邦”，“身份证”：“34998”}，{“姓名”：“卡斯特罗”，“身份证”：“34996”}，{“姓名”：“卡斯特巴亚克”，“身份证”：“34995”}]



有用的内容如下：
这看起来很酷。干杯。（请保持演示在线）