如何为多个字段使用相同的tokeninput

时间:2014-10-09 05:59:35

标签: javascript html jquery-tokeninput

我有一个表,其中一列(比如名称)由文本字段组成。我需要为所有行添加相同的tokeninput。

<script type="text/javascript">
$(function(){
$('#names').tokenInput([
  {id: 7, name: "Super Mario"},
  {id: 11, name: "Battletoads"},
  {id: 13, name: "Pong"},
  {id: 17, name: "The Legend of Zelda"},
  {id: 19, name: "Metroid"},
  {id: 23, name: "Donkey Kong Country"},
  {id: 29, name: "Super Smash Bros."},
  {id: 32, name: "Star Fox"},
  {id: 35, name: "Starcraft"},
  {id: 37, name: "Pokemon"},
  {id: 38, name: "Minecraft"},
  {id: 41, name: "The Sims"},
  {id: 43, name: "Final Fantasy"},
  {id: 44, name: "Resident Evil"},
  {id: 46, name: "Kingdom Hearts"},
  {id: 47, name: "Tetris"},
  {id: 48, name: "Grand Theft Auto"},
  {id: 51, name: "World of Warcraft"},
  {id: 53, name: "Metal Gear Solid"},
  {id: 54, name: "Civilization"},
  {id: 56, name: "Pac-Man"},
  {id: 59, name: "Animal Crossing"},
  {id: 62, name: "Spyro the Dragon"},
  {id: 64, name: "Crash Bandicoot"},
  {id: 65, name: "Sonic the Hedgehog"},
  {id: 72, name: "Tomb Raider"},
  {id: 77, name: "Mortal Kombat"},
  {id: 81, name: "Space Invaders"}
], { 
  theme: "facebook",
  noResultsText: "Nothin' found.",
  searchingText: "Searching...",
  preventDuplicates: true
}); 

});
</script>

我需要多个字段的上述令牌输入。 EX:说我有一个名为Names的表格。所以我需要在每个中提交的所有名称我想使用相同的令牌输入

以下是Html

<tr><td><input type="text" id="names"></td></tr>
<tr><td><input type="text" id="names1"></td></tr>
<tr><td><input type="text" id="names2"></td></tr>

我可以用于一个文本字段,但我需要对所有行都一样

演示链接:http://codepen.io/jakestuts/full/IBmja

1 个答案:

答案 0 :(得分:0)

您需要单独初始化它们 - 使用for循环。

var tokens = [
  {id: 7, name: "Super Mario"},
  {id: 11, name: "Battletoads"},
  {id: 13, name: "Pong"},
      etc...
  {id: 72, name: "Tomb Raider"},
  {id: 77, name: "Mortal Kombat"},
  {id: 81, name: "Space Invaders"}
];

for (var i = 1; i <= 3; i++){
    $('#names' + i).tokenInput(tokens, { 
      theme: "facebook",
      noResultsText: "Nothin' found.",
      searchingText: "Searching...",
      preventDuplicates: true
    });
}