jQuery UI自动完成多值

Question

我在使用jQuery自动完成功能时遇到了一个奇怪的问题。

我有一个自动完成文本框，可以检索多个值并将它们列出，但是，我想为每个所选项目有另一个值存储在隐藏字段中。

这是我使用的代码：

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

然而，在Firefox中，这很正常，但在IE8中，每次在原始文本框中选择新值时，隐藏字段中的值将被完全替换，尽管原始文本框的工作正常。

我的jQuery并不是最好的，因此以上某些内容是猜测和来自文档的。

我认为我在$('#RecipientsPayrollNo').val(pterms.join(", "));行上做错了什么，但我不确定。

如果有人能帮忙，将不胜感激。

- LiamGu

Answer 1

我通过将选择器更改为以下内容来解决了这个问题：

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

- LiamGu