jQuery的TokenInput库 - 如何恢复到初始状态

Question

我使用jQuery TokenInput从http://loopj.com/jquery-tokeninput/。

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

于是我就用回调函数OnAdd和删除最后李所以现在看起来正确的。

但是，当用户删除选定的令牌则TokenInput框消失 - 我想是因为没有李现。我试图添加李和输入文本，但功能无法正常工作。

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

我已阅读文档，但未找到答案。

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

Answer 1

TokenInput似乎没有复位功能，据我可以看到形成文档。

这里是工作的解决方案的片断。

此解决方案通过克隆将成为令牌输入的元件，那么当复位按钮被点击当前令牌元件由该克隆的另一个副本替换。

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