Question

我正在使用tag-it插件从用户那里获取标签输入。使用自动完成的标记源是通过ajax调用，该调用返回json对象，使用该对象映射要显示给用户的值和标记名称。 json对象还包含每个标签的ID，我不想向用户显示该标签，而是发送到服务器而不是标签标签/值。为此，我想我可以使用＆＃34;选择＆＃34;通常在自动填充中可用的选项。此函数将维护用户选择的所有ID的数组。但是当我选择一个标签时，select函数就不会被调用。我使用的代码如下：

   $("#myTags").tagit({
        allowSpaces: true,
        autocomplete: {
            source: function (request, response) {
                $.ajax({
                    url: "http://localhost:5555/api/Tag",
                    dataType: "json",
                    data: {
                      strSearch: request.term
                    },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                label: item.Name, //Use rest of the data to map IDs
                                value: item.Name,
                                ID: item.ID
                            }
                        }));
                    }
                });
            },
            minLength: 1,
            select: function (event, ui) {
                console.log(ui.item.label + "=" + ui.item.ID);
            }

        }

    });

Answer 1

对我来说，使用向上/向下键和ENTER时选择不起作用。用鼠标和标签工作。

我已尝试过其他帖子中建议的一些密钥检测代码（如果密钥== 13），但没有一个对我有效。

我的解决方案是将焦点事件放在我临时存储具有焦点的最后一个对象的位置。然后，当用户点击输入键或用鼠标点击时，我检查键入的标签是否与焦点标签上的最后一个标签相同。这与标签被“选中”的效果相同：

// Variable used to store temporarily the focused label from
// the autocomplete list.
var focusedTag   = null;

$('#tags-list').tagit({

    fieldName: 'tags',

    autocomplete: {

        source: function (request, response) { /* Load your list... */ },

        // Stored the tag that received focus temporarily, to solve
        // enter key problem.
        focus: function(event, ui) {
            focusedTag = ui.item;
        },

        delay: 100,
        minLength: 3
    },

    afterTagAdded: function (event, ui) {

        if (focusedTag !== null &&
                focusedTag.label === ui.tagLabel) {
            // Same as if it was selected...
        }

        focusedTag   = null;

    },

    allowSpaces: true
});

干杯。

tag-it：自动完成中选择的功能不起作用

1 个答案: