title: jQuery UI Autocomplete Multiple Values
body: <p>I'm having a weird issue with my jQuery Autocomplete.</p>
  
  <p>I have an autocomplete textbox which retrieves multiple values and lists them fine, however, what I want to do is have another value for each selected item in hidden field.</p>
  
  <p>Here's the code I'm using:</p>
  
  <pre><code>$('#RecipientsList')
      // don't navigate away from the field on tab when selecting an item
          .bind( "keydown", function( event ) {
              if ( event.keyCode === $.ui.keyCode.TAB &amp;&amp;
                      $( this ).data( "autocomplete" ).menu.active ) {
                  event.preventDefault();
              }
          })
          .autocomplete({
              source: function (request, response) {
                  $.ajax({
                      url: '&lt;%=Url.Action("GetRecipients", "Bulletin") %&gt;',
                      dataType: "json",
                      data: {
                          q: extractLast(request.term)
                      },
                      dataFilter: function (data) { return data; },
                      success: function (data) {
                          response($.map(data, function (item) {
                              return {
                                  label: item.FirstName + ' ' + item.LastName,
                                  value: item.FirstName + ' ' + item.LastName,
                                  payroll: item.EmployeeNumber
                              }
                          }));
                      }
                  });
              },
              search: function() {
                  // custom minLength
                  var term = extractLast( this.value );
                  if ( term.length &lt; 2 ) {
                      return false;
                  }
              },
              focus: function() {
                  // prevent value inserted on focus
                  return false;
              },
              select: function( event, ui ) {
                  var terms = split(this.value);
                  var pterms = split($('#RecipientsPayrollNo').val());
                  // remove the current input
                  terms.pop();
                  pterms.pop();
                  // add the selected item
                  terms.push(ui.item.value);
                  pterms.push(ui.item.payroll);
                  // add placeholder to get the comma-and-space at the end
                  terms.push( "" );
                  pterms.push( "" );
                  this.value = terms.join( ", " );
                  $('#RecipientsPayrollNo').val(pterms.join( ", " ));
                  return false;
              }
          });
  </code></pre>
  
  <p>However, this works fine in Firefox, but in IE8, the values in the hidden field are completely replaced each time a new value is selected in the original text box, although the original text box works as it should.</p>
  
  <p>My jQuery isn't the best in the world so some of the above is guesswork and from documentation.</p>
  
  <p>I think I'm doing something wrong with the line <code>$('#RecipientsPayrollNo').val(pterms.join( ", " ));</code> but I'm not quite sure what.</p>
  
  <p>If anyone can help, it'd be greatly appreciated.</p>