Question

我正在使用这个jQuery插件和twitter-typeahead：

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

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

选择一个或多个标签后，保留输入字段显示输入字段内的最后一个标签。我无法弄清楚为什么/如何以及如何防止这种情况。

过程如下：

用户点击标记管理员输入
用户开始输入，获得自动完成功能
用户选择自动填充项目
该项目被添加为标记，输入字段将被清空
用户在输入字段外单击，输入字段将填充最后选择的标记=＆gt;为什么？？！（期望的结果：输入字段在离开后保持空白）

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

“将标记管理器与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('');});

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

jQuery标签管理器＆amp; Typeahead：在离开输入字段后阻止输入填充？

1 个答案: