title: jQuery UI token
body: <p>I have followed this tutorial which uses jQuery UI to generate Facebook tokens like:
  <a href="http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/" rel="nofollow noreferrer">http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/</a></p>
  <p>My problem is I need to pass two values thru JSON: the ID and the NAME.
  the server side script looks like this:</p>
  <pre><code>header('Content-Type: text/html; charset=iso-8859-1', true);
  include($_SERVER['DOCUMENT_ROOT'].'/inrees/inrees/communaute/includes/_db.php');
  
  $param = $_GET[&quot;term&quot;];
  $query = mysql_query(&quot;SELECT * FROM comm_carnet, in_emails 
                         WHERE carnet_iduser=emails_id 
                           AND emails_id!='&quot;.$_COOKIE['INREES_ID'].&quot;'  
                           AND emails_nom REGEXP '^$param'&quot;);
  
  //build array of results
  for ($x = 0, $numrows = mysql_num_rows($query); $x &lt; $numrows; $x++) {
      $row = mysql_fetch_assoc($query);
      $friends[$x] = array(&quot;name&quot; = &gt; $row[&quot;emails_nom&quot;], &quot;id&quot; = &gt; $row[&quot;emails_id&quot;]);
  }
  
  //echo JSON to page
  $response = $_GET[&quot;callback&quot;].&quot;(&quot;.json_encode($friends).&quot;)&quot;;
  
  echo $response;
  </code></pre>
  <p>the echo from the server side script is:</p>
  <pre><code>([{&quot;name&quot;:&quot;dupont&quot;,&quot;id&quot;:&quot;34998&quot;},{&quot;name&quot;:&quot;castro&quot;,&quot;id&quot;:&quot;34996&quot;},{&quot;name&quot;:&quot;castelbajac&quot;,&quot;id&quot;:&quot;34995&quot;}])
  </code></pre>
  <p>(which is exactly what I need)</p>
  <p>I am passing the the &quot;name&quot; array but not the &quot;id&quot; 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:</p>
  <pre><code>//attach autocomplete
  $(&quot;#to&quot;).autocomplete({
  
      //define callback to format results
      source: function (req, add) {
  
          //pass request to server
          $.getJSON(&quot;messages_ajax.php?callback=?&quot;, 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 = $(&quot;&lt;span&gt;&quot;).text(friend),
              a = $(&quot;&lt;a&gt;&quot;).addClass(&quot;remove&quot;).attr({
                  href: &quot;javascript:&quot;,
                  title: &quot;Remove &quot; + friend
              }).text(&quot;x&quot;).appendTo(span);
          $(&quot;&lt;input /&gt;&quot;, {
              value: &quot;id&quot;,
              type: &quot;hidden&quot;,
              name: &quot;id&quot;
          }).appendTo(span);
          //add friend to friend div
          span.insertBefore(&quot;#to&quot;);
      },
  
      //define select handler
      change: function () {
          //prevent 'to' field being updated and correct position
          $(&quot;#to&quot;).val(&quot;&quot;).css(&quot;top&quot;, 2);
      }
  });
  
  //add click handler to friends div
  $(&quot;#friends&quot;).click(function () {
      //focus 'to' field
      $(&quot;#to&quot;).focus();
  });
  
  //add live handler for clicks on remove links
  $(&quot;.remove&quot;, document.getElementById(&quot;friends&quot;)).live(&quot;click&quot;, function () {
  
      //remove current friend
      $(this).parent().remove();
  
      //correct 'to' field position
      if ($(&quot;#friends span&quot;).length === 0) {
          $(&quot;#to&quot;).css(&quot;top&quot;, 0);
      }
  });
  </code></pre>
  <p>so is basically where you see the comment: <code> &quot;//define select handler&quot;</code>  that something needs to be done but I can't do it!</p>
  <p>I added the line:</p>
  <p><code>$(&quot;&lt;input /&gt;&quot;, {value:&quot;id&quot;, type:&quot;hidden&quot;, name:&quot;id&quot;}).appendTo(span);</code></p>
  <p>but it does not fetch my array &quot;id&quot;.</p>