Question

我正在使用Jquery自动完成功能将多个值启用到单个字段中。它工作正常，直到我在输入字段中使用退格。当用户每次将选定字段的ID添加到一个隐藏字段时进行一个或多个选择。当用户使用退格键删除一个或多个选项时，我无法使用自动完成功能捕获此事件，因此我无法修改隐藏场的价值。

你可以帮帮我吗？请参阅以下链接了解更多详情。

http://jsfiddle.net/Z26yv/

HTML：

<label>Teams:</label>
<input type="text" id="teams" />
<br />
<br />
<label>Team IDs:</label>
<input id="team_ids" />

脚本：

$(function() {
            var availableTags = [
                {label: "Choice1", value: "Choice1", db: 1},
                {label: "Choice2", value: "Choice2", db: 2},
                {label: "Choice3", value: "Choice3", db: 3},
                {label: "Choice4", value: "Choice4", db: 4},
                {label: "Choice5", value: "Choice5", db: 5},
                {label: "Choice6", value: "Choice6", db: 6},
                {label: "different text", value: "different text", db: 7},
            ];

            function split(val) {
                return val.split(/,\s*/);
            }

            function extractLast(term) {
                return split(term).pop();
            }

            $("#teams")
            //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("ui-autocomplete").menu.active) {
                    event.preventDefault();
                }
            })
            .autocomplete({
                minLength: 0,
                source: function(request, response) {
                    //delegate back to autocomplete, but extract the last term
                    response($.ui.autocomplete.filter(availableTags, extractLast(request.term)));
                },
                focus: function() {
                    //prevent value inserted on focus
                    return false;
                },
                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(", ");

                    $('#team_ids').val($('#team_ids').val() + "," + ui.item.db);
                    return false;
                }
            });
        });

jquery自动完成多选退格问题

0 个答案: