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( ", " )); 行上做错了什么，但我不太确定是什么。

如果有人可以提供帮助，我们将不胜感激。

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