Question

当尝试使用Bootstrap标签输入和Typeahead.js进行标签输入时，遇到一些奇怪的行为：
1）我无法通过单击建议来添加标签，它只能将文本添加到输入中，而不能作为标签添加，但是如果我使用方向键选择建议并按Enter，它可以工作。

2）当我按Enter键时，标签已添加，但请提前输入提示我刚刚输入的内容。

https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/上的提前输入部分正是我要执行的操作。

view.cshtml：

<div class="form-input">
        <h4>Tags</h4>
        <input type="text" value="" placeholder="Tags" id="Model_TagsList" name="Model.TagsList"/>
        </div>
<div hidden id="ExistingTag">
        @{var result = String.Join(", ", Model.ExistingTags.ToArray()); }
        @result
    </div>

JS：

function GetTag() {
    jsonObj = [];
    var tag = $("#ExistingTag").text().split(",");
    $.each(tag, function (key, value) {
        value = $.trim(value);
        var item = new Object();
        item.value = value;
        item.text = value;
        jsonObj.push(item);
    });
    return jsonObj;
}
function initBloodhoundTag() {
    var tag = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        local: GetTag()
    });
    tag.initialize();
    var elt = $('#Model_TagsList');
    elt.tagsinput({
        freeInput: true,
        typeaheadjs: {
            name: 'tag',
            displayKey: 'text',
            source: tag.ttAdapter()
        }
    });
}
$(document).ready(function () {    
    initBloodhoundTag();
});

编辑：
我正在使用IE 11，这可能是个问题吗？
上面链接的在线示例运行正常，但在包含插件的示例中，typeahead似乎不起作用。
当我使用Enter添加标签时，控制台中显示了错误消息

未设置itemValue选项时无法添加对象

似乎仍然添加了标签，但这是否可能是其他事情无法正常工作的原因？
如果我添加：

itemValue: 'value',
itemText: 'text',

到elt.tagsinput，我不能添加不在建议中的标签。

引导标签输入和Typeahead.js

0 个答案: