jQuery Tags Manager＆Typeahead：在离开输入字段后，防止输入信息被填满？

Question

我一起使用这个jQuery插件与Twitter的预输入：

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

一切正常，只有一个困扰我的小东西：

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

过程发生这样的事情：

1. 用户点击到标签管理器输入
2. 用户开始输入，获取自动完成
3. 用户选择自动完成项目
4. 该项目被添加作为标记，输入字段被清空
5. 用户在输入字段外单击，输入字段被最后选择的标记填充=>为什么？ ：

你可以试模自己的标签管理器的网站我上面链接上（期望的结果输入字段为空后离开停留），刚去的例子

“与预输入结合使用标签管理器.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('');}); 

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