jQuery UI自动完成多个值 [英] jQuery UI Autocomplete Multiple Values

问题描述

我的jQuery自动完成问题有一个奇怪的问题。

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

我有一个自动完成文本框，可以检索多个值并将它们列好，但是，我想要的是什么do为隐藏字段中的每个选定项目提供另一个值。

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

但是，这在Firefox中工作正常，但在IE8中，隐藏字段中的值完全被替换每次在原始文本框中选择一个新值，虽然原始文本框可以正常工作。

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.

我的jQuery不是世界上最好的，所以一些以上是猜测和文档。

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

我认为我在行 $（'＃RecipientsPayrollNo'）中做错了。 （pterms.join（，））; 但我不太确定是什么。

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.

推荐答案

我通过将选择更改为以下内容来解决此问题：

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

这篇关于jQuery UI自动完成多个值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！