jQuery UI token

I have followed this tutorial which uses jQuery UI to generate Facebook tokens like: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/

My problem is I need to pass two values thru JSON: the ID and the NAME. the server side script looks like this:

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;

the echo from the server side script is:

([{"name":"dupont","id":"34998"},{"name":"castro","id":"34996"},{"name":"castelbajac","id":"34995"}])

(which is exactly what I need)

I am passing the the "name" array but not the "id" which needs to be a hidden input with the corresponding id from the database, the html page where the call to the php is done looks like this:

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

         开发者_Go百科   //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);
    }
});

so is basically where you see the comment: "//define select handler" that something needs to be done but I can't do it!

I added the line:

$("<input />", {value:"id", type:"hidden", name:"id"}).appendTo(span);

but it does not fetch my array "id".

your code should be:

UPDATE With DEMO

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

• NOTE: this assuming your json code look like:

  [{"name":"dupont","id":"34998"},{"name":"castro","id":"34996"},{"name":"castelbajac","id":"34995"}]

• USEFULL READS: http://jqueryui.com/demos/autocomplete/#remote-jsonp

So, it looks like you're adding only the names to the suggestions list, not the entire data object which would contain the name and id members. Instead of doing this:

suggestions.push(val.name)

try pushing the entire data object onto the list you're passing to your callback:

suggestions.push(val)

Then, in your callback, ui.item.value will contain the full data member, so you'll need to change your code around a bit. To access the name and id values separately, you could presumably do something like this:

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

Then, you can use those variables where you need to (friend becomes friendID, and instead of passing {value:"id" ...} to the hidden input, you could do {value:friendID ...}