jquery TokenInput 库 - 如何重置为初始状态答案

【问题标题】：jquery TokenInput library - how to reset to initial statejquery TokenInput 库 - 如何重置为初始状态
【发布时间】：2017-05-12 13:39:29
【问题描述】：

我正在使用来自 http://loopj.com/jquery-tokeninput/ 的 jQuery TokenInput。

我有一位前辈，用户只能添加一个标记，所以我使用tokenLimit: 1，但是当用户选择标记时，会自动添加另一个 li，并且元素宽度会增加，并且在设计上看起来不合适。

所以我使用回调函数OnAdd 并删除最后一个 li，所以它现在看起来正确。

但是当用户删除选定的令牌时，TokenInput 框就会消失 - 我猜是因为现在没有 li。我试图附加 li 并输入文本，但该功能不起作用。

谁能告诉我如何正确重置 TokenInput？

我已阅读文档但没有找到答案。

我也试过selector.tokenInput("clear"); 不工作

【问题讨论】：

标签： jquery jquery-tokeninput

【解决方案1】：

据我在文档中看到的，TokenInput 似乎没有重置功能。

这是一个解决方案的工作 sn-p。

此解决方案的工作原理是克隆将成为令牌输入的元素，然后当单击重置按钮时，当前令牌元素将替换为克隆的另一个副本。

$(document).ready(function() {
  
    var tokenCopy = $("#demo-input-local").clone()  

    function resetToken() {
      var newToken = tokenCopy.clone()
      $(".token-input-list")
        .before(newToken)
        .remove()
      
      setToken()

    }      
      
    
    function setToken() {
      
            $("#demo-input-local").tokenInput([
                {id: 7, name: "Ruby"},
                {id: 11, name: "Python"},
                {id: 13, name: "JavaScript"},
                {id: 17, name: "ActionScript"},
                {id: 19, name: "Scheme"},
                {id: 23, name: "Lisp"},
                {id: 29, name: "C#"},
                {id: 31, name: "Fortran"},
                {id: 37, name: "Visual Basic"},
                {id: 41, name: "C"},
                {id: 43, name: "C++"},
                {id: 47, name: "Java"}
            ]
           ,{onDelete: function (item) {
             
              // Decide here if you need to do a reset then...
              resetToken()
            }}
      );
      
      };
      
     

    setToken()
    
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.loopj.com/jquery-tokeninput/src/jquery.tokeninput.js"></script>
    <link rel="stylesheet" href="http://www.loopj.com/jquery-tokeninput/styles/token-input.css" type="text/css" />
    <link rel="stylesheet" href="http://www.loopj.com/jquery-tokeninput/styles/token-input-facebook.css" type="text/css" />

    <h2>Simple Local Data Search</h2>
    <div>
        <input type="text" id="demo-input-local" name="blah" />
        <input type="button" value="Submit" />
        <input type="button" id="btnReset" value="Reset" />
    </div>

【讨论】：

感谢您的回答@VanquiishedWombat，但我没有任何重置按钮。而且我无法按要求添加重置按钮
ok 修改为在删除时重置。请注意，您需要添加自己的检查以识别高级用户何时需要重置！

【解决方案2】：

var tokens = $("#TOKENNAME .token-input-delete-token-facebook");
tokens.each(function () { $(this).trigger("click"); });

我知道这是一篇旧帖子，我只是认为它可以帮助任何寻找答案的人。代码只是遍历列表并为每个选定的标记触发“删除”事件。

【讨论】：