jquery Библиотека TokenInput - как восстановить исходное состояние

Question

Я использую jQuery TokenInput от http://loopj.com/jquery-tokeninput/.

У меня есть старший, что пользователь может добавить только один токен, поэтому я использую tokenLimit: 1, но когда пользователь выбирает токен, добавляется еще один li, а ширина элемента увеличивается, а дизайн мудрый он не выглядит правильным.

Поэтому я использую функцию обратного вызова OnAdd и удаляю последнюю ли, чтобы она выглядела правильно.

Но когда пользователь удаляет выбранный токен, то окно TokenInput исчезает - я думаю, потому что теперь нет li. Я попытался добавить ли и текст ввода, но функциональность не работает.

Может ли кто-нибудь сказать мне, как правильно сбросить токен?

Я прочитал документацию, но не нашел ответа.

Я также попытался 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>