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

Question

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

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

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

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

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

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

我也试过 selector.tokenInput("clear"); 没用

Answer 1

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

这是解决方案的工作片段。

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

$(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>