3

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. Example

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. Example after li removed

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

Vanquished Wombat
  • 9,075
  • 5
  • 28
  • 67
Jigarb1992
  • 828
  • 2
  • 18
  • 41

2 Answers2

2

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>
Vanquished Wombat
  • 9,075
  • 5
  • 28
  • 67
  • I appreciate your answer @VanquishedWombat but I don't have any Reset button. And I can't add the reset button as per the requirement – Jigarb1992 Dec 28 '16 at 10:30
  • ok modified to reset on delete. Note you will need to add your own check to recognise when the reset is required for the senior user ! – Vanquished Wombat Dec 28 '16 at 10:38
0
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.

Mark Gonzales
  • 1
  • 1