jQuery UI Autocomplete Multiple Values

Question

I'm having a weird issue with my jQuery Autocomplete.

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.

Here's the code I'm using:

$('#RecipientsList')
    // don't navigate away from the field on tab when selecting an item
        .bind( "keydown", function( event ) {
            if ( event.keyCode === $.ui.keyCode.TAB &&
                    $( this ).data( "autocomplete" ).menu.active ) {
                event.preventDefault();
            }
        })
        .autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '<%=Url.Action("GetRecipients", "Bulletin") %>',
                    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 < 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;
            }
        });

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.

My jQuery isn't the best in the world so some of the above is guesswork and from documentation.

I think I'm doing something wrong with the line $('#RecipientsPayrollNo').val(pterms.join( ", " )); but I'm not quite sure what.

If anyone can help, it'd be greatly appreciated.

Answer 1

I fixed this by changing the select to the following:

select: function (event, ui) {
                var terms = split(this.value);
                // remove the current input
                terms.pop();
                // add the selected item
                terms.push(ui.item.value);
                // add placeholder to get the comma-and-space at the end
                terms.push("");
                this.value = terms.join(", ");
                var prollNos = $('#RecipientsPayrollNo').val()
                $('#RecipientsPayrollNo').val(prollNos + ui.item.payroll + ", ");
                return false;
            }