按Tab键或输入时如何在自动填充中添加值？

Question

我正在使用http://aehlke.github.io/tag-it/进行标记，但是当自动填充功能出现并且您点击输入或制表符时，我很难添加值。如果我使用鼠标，我可以轻松选择这样的值：

然后点击正确选择它的值：

但是，如果我使用回车键，它只会根据我目前输入的文字添加标签... 例如，假设我想添加＆＃34; tryme＆＃34;作为一个标签，所以我开始输入尝试，我在我的键盘上使用我的光标，然后选择我想要的值，然后点击回车键，我最终是这样的：

在：

然后我按回车键，我得到＆＃34;尝试＆＃34;而不是＆＃34; tryme＆＃34;：

这是我的代码：

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

我尝试使用select事件，但只在我使用鼠标时触发。如何使用此库处理输入/制表键？

这是我编辑过的代码：

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

结束了这个感谢Banana（来自下面的回答者）：

//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

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

select: function(event, ui) {

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

此外，当您按输入或标签时，您可以使用beforeTagAdded:添加焦点对齐的标记（因为鼠标悬停）：

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

    }
});

Answer 2

使用按键值

$('#inputbox').keypress(function(e) {
var code = e.keyCode || e.which;
});

以下是期望值

标签=＆gt; 9

输入=＆gt; 13

根据它的docs

您可以使用活动

**beforeTagAdded (function, Callback)**

在添加输入之前检查输入的值。 检查它是否是您需要的值之一。如果返回true，则返回false