javascript - 按 T​​ab 或 Enter 时如何在自动完成中添加值？

Question

我正在使用http://aehlke.github.io/tag-it/用于标记，但当自动完成功能出现并且您按 Enter 或 Tab 时，我很难添加值。如果我使用鼠标，我可以轻松选择一个值，如下所示:

然后单击正确选择的值:

但是，如果我使用回车键，它只会根据我到目前为止输入的文本添加标签......例如，假设我想添加“tryme”作为标签，所以我开始输入 try，然后使用键盘上的光标并选择我想要的值，然后按 Enter 键，最终结果如下:

之前:

然后我按 Enter，我得到“try”而不是“tryme”:

这是我的代码:

var entityId = '<%=(int)Module.Company%>'; //parameter for web service.
$("#MainContent_txtTags").tagit({
    singleField: true,
    singleFieldDelimiter: " ",
    autocomplete: ({
        delay: 0,
        minLength: 1,
        source: function(request, response) {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "/Code/WebServices/Tags.asmx/GetTags",
                dataType: "json",
                data: '{"entityId":"' + entityId + '","search":"' + request.term + '"}',
                success: function(data) {
                    response($.map(data.d, function(item) {
                        return {
                            label: item.TagName,
                            value: item.TagName
                        }
                    }));
                }
            });
        },
        open: function() {
            $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
        },
        close: function() {
            $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus);
        },
        search: function(event, ui) {
            $(this).addClass('autocompleteloading');
            // custom minLength
            var term = extractLast(this.value);
            //alert(term);
            if (typeof(term) !== 'undefined') {
                if (term.length < 1) {
                    return false;
                }
            }
            return true;
        },
        select: function(event, ui) {
            alert("hi");
        },
        focus: function() {
            // prevent value inserted on focus
            return false;
        },
        response: function() {
            $(this).removeClass('autocompleteloading');
        }
    })
});

我尝试使用选择事件，但只有当我使用鼠标时才会触发。如何使用此库处理 Enter/Tab 键？

这是我编辑的代码:

//tagging
//to clear
var entityId = '<%=(int)Module.Company%>'; //parameter for web service.
var availableTags = [];
$("#MainContent_txtTags").tagit({
    singleField: true,
    singleFieldDelimiter: " ",
    autocomplete: ({
        delay: 0,
        minLength: 1,
       // autoFocus: true,
        source: function(request, response) {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "/Code/WebServices/Tags.asmx/GetTags",
                dataType: "json",
                data: '{"entityId":"' + entityId + '","search":"' + request.term.toLowerCase() + '"}',
                success: function (data) {
                    availableTags = [];
                    response($.map(data.d, function (item) {
                        availableTags.push(item);
                        return {
                            label: item.TagName,
                            value: item.TagName
                        }
                    }));
                }
            });
        },
        open: function() {
            $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
        },
        close: function() {
            $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus);
        },
        search: function(event, ui) {
            $(this).addClass('autocompleteloading');
            // custom minLength
            var term = extractLast(this.value);
            //alert(term);
            if (typeof(term) !== 'undefined') {
                if (term.length < 1) {
                    return false;
                }
            }
            return true;
        },
        select: function(event, ui) {

        },
        focus: function() {
            // prevent value inserted on focus
            return false;
        },

        response: function() {
            $(this).removeClass('autocompleteloading');
        }
    }),
    beforeTagAdded: function (evt, ui) {
        // If tag is incomplete..
        if ($.inArray(ui.tagLabel, availableTags) == -1) {
            var $tagdropdowns = $('body ul:last li a');
            // Add the selected tag (if there) from dropdown.
            var $activeTag = $tagdropdowns.filter(function () { return $(this).is(":hover") });
            if ($activeTag.length) {
                $(this).tagit("createTag", $activeTag.text());
                // Otherwise add the first tag from the dropdown.
            } else {
                $(this).tagit("createTag", $tagdropdowns.first().text());
            }
            // Stop adding incomplete tag.
            return false;
        }
    }
});

最后谢谢香蕉(下面的回答者):

//tagging
        //to clear
        var entityId = '<%=(int)Module.Company%>'; //parameter for web service.
        var callBeforeTagAdded = true;
        $("#MainContent_txtTags").tagit({
            singleField: true,
            singleFieldDelimiter: " ",
            autocomplete: ({
                delay: 0,
                minLength: 1,
                // autoFocus: true,
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "/Code/WebServices/Tags.asmx/GetTags",
                        dataType: "json",
                        data: '{"entityId":"' + entityId + '","search":"' + request.term.toLowerCase() + '"}',
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    label: item.TagName,
                                    value: item.TagName
                                }
                            }));
                        }
                    });
                },
                open: function () {
                    $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
                },
                close: function () {
                    $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                },
                search: function (event, ui) {
                    $(this).addClass('autocompleteloading');
                    // custom minLength
                    var term = extractLast(this.value);
                    //alert(term);
                    if (typeof (term) !== 'undefined') {
                        if (term.length < 1) {
                            return false;
                        }
                    }
                    return true;
                },
                response: function () {
                    $(this).removeClass('autocompleteloading');
                }
            }),
            beforeTagAdded: function (evt, ui) {
                // If tag is incomplete.
                    var $tagdropdowns = $('body ul:last li a');

                    // Add the selected tag (if there) from dropdown.
                    var $activeTag = $tagdropdowns.filter(function () {
                        return $(this).hasClass("ui-state-focus");
                    });

                    $tagdropdowns.removeClass('ui-state-focus');
                    if ($activeTag.length && callBeforeTagAdded) {
                        $("#MainContent_txtTags").tagit("createTag", $activeTag.text());
                        callBeforeTagAdded = false;
                        return false;
                        // Otherwise add the first tag from the dropdown.
                    } else {
                        callBeforeTagAdded = true;
                    }
            }
        });

Answer 1

默认情况下，tab 和 enter 都会插入使用箭头键选择的标签。您必须删除以下代码，因为它会覆盖默认焦点并选择选项:

select: function(event, ui) {

},
focus: function() {
    // prevent value inserted on focus
    return false;
},

此外，您可以使用 beforeTagAdded: 添加按 enter 或 tab 时处于焦点的标签(由于鼠标悬停) >:

(...)
$("#MainContent_txtTags").tagit({
    (...)
    beforeTagAdded: function(evt, ui) {

        var $tagdropdowns = $('body ul:last li a');
        var $activeTag = $tagdropdowns.filter(function() { 
            return $(this).hasClass('ui-state-focus') 
        });
        $tagdropdowns.removeClass('ui-state-focus');

        if ($activeTag.length) {
            $(this).tagit("createTag", $activeTag.text());
            return false;
        }

    }
});