jQuery标签管理器和Typeahead：防止输入在离开输入字段后被填充？

Question

我将这个 jQuery 插件与 twitter-typeahead 一起使用：

https://maxfavilli.com/jquery-tag-manager

一切都按预期进行，只有一件小事困扰我：

选择一个或多个标签后，离开输入字段显示输入字段内的最后一个标签。而且我不知道为什么/如何以及如何防止这种情况发生。

这个过程是这样发生的：

1. 用户点击进入标签管理器输入
2. 用户开始输入，自动完成
3. 用户选择了一个自动完成项
4. 项目被添加为标签，输入字段被清空
5. 用户在输入字段外点击，输入字段被最后选择的标签填满 => 为什么？？！ （期望的结果：离开后输入字段保持空白）

您可以在我上面链接的标签管理器网站上自己试用，只需转到示例

“将标签管理器与 typeahead.js 结合使用”

并输入国家名称，选择国家，然后离开输入字段。

我已经尝试过这个：How to prevent Twitter typeahead from filling in the input with the selected value?，但不幸的是它没有帮助，因为标签在离开输入后被填充到输入字段中 - typeahead 已经关闭了。

HTML：

<div class="form-group mbn">
    <label for="artikel_person">Person</label>
    <input id="artikel_person" placeholder="E-Mail- oder Namensbestandteil" class="gui-input tm-input" type="text">
    <input name="artikel_person" id="artikel_person-out" type="hidden">
    <div class="row">
        <div class="col-sm-12 tag-container tags-artikel_person">
        </div>
    </div>
</div>

Javascript：

var th_config = {
        hint: true,
        highlight: true,
        minLength: 1
    };
var artikel_person = [];
var artikel_personApi = $("#artikel_person").tagsManager({
            delimiters: [13, 44, 59],
            backspace: [],
            tagsContainer: '.tags-artikel_person',
            tagClass: 'tm-tag-system',
            onlyTagList: true,
            fillInputOnTagRemove: false
        }).typeahead(th_config, {
            source: ajaxPerson
        }).on('typeahead:selected', function (e, d) {
            artikel_personApi.tagsManager("pushTag", d.value);
            var index = artikel_person.findIndex(function (elem) {
                return elem.name === d.value;
            });
            if (index < 0) {
                artikel_person.push({name: d.value, id: d.id});
            }
            console.log("Typeahead selected. Input value: " + $(this).val()); // logs out empty
        }).on('tm:spliced', function (e, tag) {
            var index = artikel_person.findIndex(function (elem) {
                return elem.name === tag;
            });
            if (index > -1) {
                artikel_person.splice(index, 1);
            }
        }).on('typeahead:closed', function (obj, datum, name) {
            console.log("Typeahead closed. Input value: " + $(this).val()); // logs out empty
        });

Answer 1

我不确定解决方案是否如此简单，但我通过将此脚本注入文档站点和 "Using tag manager in conjunction with typeahead.js" 下的示例进行测试，并使其正常工作。

只需将其添加到您的脚本中即可。

$("#artikel_person").on('blur',function(){
  $(this).val('');  // on focusing out of input remove the value in it..
});

还要确保在所有插件初始化脚本之后绑定此事件。

用于实时测试.. 转到相同的文档站点和相同的示例并打开控制台选项卡，粘贴此代码并运行它。

jQuery(".tm-input.tm-input-typeahead").on('blur',function(){$(this).val('');});

在此之后使用示例，您可以看到所需的行为。