jquery TokenInput 库 - 如何重置为初始状态

Posted 2023-05-09

【中文标题】jquery TokenInput 库 - 如何重置为初始状态

【英文标题】：jquery TokenInput library - how to reset to initial state

【发布时间】：2017-05-12 13:39:29

【问题描述】：

我正在使用来自 http://loopj.com/jquery-tokeninput/ 的 jQuery TokenInput。

我有一位前辈，用户只能添加一个标记，所以我使用tokenLimit: 1，但是当用户选择标记时，会自动添加另一个 li，并且元素宽度会增加，并且在设计上看起来不合适。

所以我使用回调函数OnAdd 并删除最后一个 li，所以它现在看起来正确。

但是当用户删除选定的令牌时，TokenInput 框就会消失 - 我猜是因为现在没有 li。我试图附加 li 并输入文本，但该功能不起作用。

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

我已阅读文档但没有找到答案。

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

【参考方案1】：

据我在文档中看到的，TokenInput 似乎没有重置功能。

这是一个解决方案的工作 sn-p。

此解决方案的工作原理是克隆将成为令牌输入的元素，然后当单击重置按钮时，当前令牌元素将替换为克隆的另一个副本。

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

【讨论】：

感谢您的回答@VanquiishedWombat，但我没有任何重置按钮。而且我无法按要求添加重置按钮

ok 修改为在删除时重置。请注意，您需要添加自己的检查以识别高级用户何时需要重置！

【参考方案2】：

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

我知道这是一篇旧帖子，我只是认为它可以帮助任何寻找答案的人。 代码只是遍历列表并为每个选定的标记触发“删除”事件。