Question

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

我有一个大四学生，用户只能添加一个令牌，所以我使用tokenLimit: 1，但是当用户选择令牌时，另一个li会自动添加，元素宽度会增加，设计明智看起来不合适。 / p>

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

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

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

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

我还尝试了selector.tokenInput("clear");无效

Answer 1

就我从文档中看到的而言，TokenInput似乎没有重置功能。

以下是解决方案的工作片段。

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

＆＃13;

$(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()
    
    
});

＆＃13;

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

＆＃13;

Answer 2

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  public name = 'sama';
  constructor() { }
  ngOnInit() {
  }
  getName() {
    return this.name;
  }
  setName(name: string) {
    this.name = name;
  }
}
<input type="text" [(ngModel)]="name">

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

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

2 个答案: