Using jquery clone() a new class of bootstarp Tokenfield generates within the input field

问题

go to

http://jsfiddle.net/rns3hang/450/

TokenField in newly cloned input field are working but the problem is IT IS INSIDE A INPUT FIELD

And I want just one input field with some predefined/constant tags and to be able to add new token or tags values as well

 <body>
  <br /><br />
  <div class="container">
   <br />
   <h2 align="center"> Insert Diet</h2>
   <br /><table class="table table-bordered" >
</table>
<br>
   <div class="table-responsive">
    <table class="table table-bordered" id="crud_table">
     <tr>



      <th width="20%">Breakfast</th>
      <th width="20%">Pre Lunch</th>
      <th width="20%">Lunch</th>
      <th width="5%"></th>
     </tr>
     <tr class="tableinputs">

    `  
      <td><input type="text" class="break_name skill" value="Tea/Coffee"/></td>

      <td ><input type="text" class="mid_meal  skill" value="Fruits"/></td>

      <td ><input type="text"  class="lunch_name skill" value="Vegetables,salads"/></td>
      <td><button type='button' name='remove' data-row='row"+count+"' class='btn btn-danger btn-xs remove'>-</button></td>
     </tr>
    </table>
    <div align="right">
     <button type="button" name="add" id="add" class="btn btn-success btn-xs">Add</button>
    </div>
    <div align="center">
     <button type="button" name="save" id="save" class="btn btn-info">Save</button>
    </div>
    <br />
   </div>

  </div>
 </body>

Jquery Code

$(document).ready(function(){

 $('.skill').tokenfield({
  autocomplete:{
   source: ['Food1','Food2','Food3','Food4','Food5','CSS','Laravel','CakePHP'],
   delay:100
  },
  showAutocompleteOnFocus: true
 });



 var count = 1;
 var $table;

     $table=$('#crud_table tbody');

     var $existRow=$table.find('tr').eq(1);
      /* bind to existing elements on page load*/
      bindAutoComplete($existRow);
 $('#add').click(function(){



//$("#crud_table tbody  tr.tableinputs:last").clone().appendTo("#crud_table tbody");

var $row=$("#crud_table tbody  tr.tableinputs:last").clone();
 var $input=$row.find(":text").val("");
  $table.append($row);


/*
$(".break_name:last").val('');
$(".mid_meal:last").val('');
$(".lunch_name:last").val('');*/

    bindAutoComplete($row );

    $input.focus();

 }); 

 function bindAutoComplete($row ){
    /* use row as main element to save traversing back up from input*/
     $row.find('.skill').tokenfield({
  autocomplete:{
   source: ['Food1','Food2','Food3','Food4','Food5','CSS','Laravel','CakePHP'],
   delay:100
  },
  showAutocompleteOnFocus: true
 });
     $('.skill').on('tokenfield:createtoken', function (event) {
  var existingTokens = $(this).tokenfield('getTokens');
  $.each(existingTokens, function(index, token) {
    if (token.value === event.attrs.value)
      event.preventDefault();
  });
});
}

 $(document).on('click', '.remove', function(){

//If this there is only one row left clear that row instead of removing it
if ($("#crud_table tbody tr").length === 1)
$("#crud_table tbody tr:last").find("input").val('');
else
  $("#crud_table tbody tr:last").remove();
 });

});

I have tried removing the value attribute from input field but it still doesn't work

回答1:

And I want just one input field

That's a bit challenging due the logic of the bootstrap-tokenfield is using it. But I got a possible solution, that might please you. We respect the new input fields created, but remove the attribute "name", so it is ignored by the form.

before:

$('.skill').on('tokenfield:createtoken', function (event) {
  var existingTokens = $(this).tokenfield('getTokens');
  $.each(existingTokens, function(index, token) {
    if (token.value === event.attrs.value)
      event.preventDefault();
  });
});

after

$('.skill').on('tokenfield:createtoken', function (event) {
  var existingTokens = $(this).tokenfield('getTokens');
  $.each(existingTokens, function(index, token) {
    if (token.value === event.attrs.value)
      event.preventDefault();
  });
      $(this).data('bs.tokenfield').$input.attr("name",""); //<- this is the new line
});

来源：https://stackoverflow.com/questions/51076295/using-jquery-clone-a-new-class-of-bootstarp-tokenfield-generates-within-the-in

标签

jquery

twitter-bootstrap

bootstrap-tokenfield