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>