jquery TokenInput library - how to reset to initial state

Question

I am using jQuery TokenInput from http://loopj.com/jquery-tokeninput/.

I have a senior that user can add only one token so I use tokenLimit: 1, But when user select the token the another li is added automatically and the element width is increase and design wise it not look proper.

So I use callback function OnAdd and removing last li so it looks proper now.

But when user removes the selected token then the TokenInput box disappears - I guess because there is no li now. I tried to append li and input text but the functionality is not working.

Can anyone tell me how to correctly reset the TokenInput?

I have read the documentation but found no answer.

I have also tried selector.tokenInput("clear"); that is not working

Answer 1

TokenInput appears to have no reset function as far as I can see form the docs.

Here is working snippet of a solution.

This solution works by cloning the element that will become the token input, then when the reset button is clicked the current token element is replaced by another copy of the clone.

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

Answer 2

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

I know it's an old post, I just thought it may help anyone looking for answers. The code simply iterates over the list and trigger the "Delete" event for each selected tokens.