jquery ui jeton

Question

bonjour j'ai suivi ce Wich tutoriel utilise l'interface utilisateur jquery pour générer des jetons facebook comme: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/

mon problème est que je dois passer deux valeurs à travers JSON: l'ID et le nom: le serveur script côté ressemble à ceci:

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; 

l'écho du script côté serveur est:

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

(qui est exactement ce dont j'ai besoin)

maintenant je passe le tableau "name" mais pas le "id" qui doit être une entrée cachée avec l'ID correspondant de la base de données, la page html où le appel à php est fait ressemble à ceci:

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

donc est fondamentalement où vous voyez le commentaire: "//define select handler" que quelque chose doit être fait, mais je ne peux pas le faire! j'ai ajouté la ligne:

$("<input />", {value:"id", type:"hidden", name:"id"}).appendTo(span); mais il ne récupère pas mon tableau "id", toute aide est appréciée.

ce qui a trait

Answer 1

votre code devrait être:

MISE À JOUR Avec 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() 
    }); 
}); 

• REMARQUE: cette hypothèse votre code JSON ressembler à:

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

---

• USEFU LL DISPOSE:http://jqueryui.com/demos/autocomplete/#remote-jsonp

Answer 2

Ainsi, il semble que vous ajoutez que les name s à la liste des suggestions, et non l'ensemble de l'objet data qui contiendrait les membres name et id. Au lieu de faire ceci:

suggestions.push(val.name) 

essayez de pousser l'ensemble de l'objet de données sur la liste vous passez à votre rappel:

suggestions.push(val) 

Ensuite, dans votre rappel, ui.item.value contiendra le membre à part entière de données, donc vous devrez changer votre code un peu.Pour accéder aux name et id valeurs séparément, vous pourriez probablement faire quelque chose comme ceci:

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

Ensuite, vous pouvez utiliser les variables pour lesquelles vous devez (friend devient friendID, et au lieu de passer {value:"id" ...} à l'entrée cachée, vous pourriez faire {value:friendID ...}