Autocomplete Remove Values

Question

I'm using the autocomplete and the "TagsInput" plugin and I'm having a problem that I can not solve. The selected categories pass a value in hidden field (#cat-id), but I can not delete the value when the category is removed.

I would like when removing a category from the input, also delete the value of it in the hidden field.

$(document).ready(function (e) {

   // Initialize Tags Input
        $('.input-tags').tagsInput({ width: 'auto', height: 'auto'});

    $('form[name=form_add]').on('submit',(function(e) {
      e.preventDefault();

      var formData = new FormData(this);
      var form = $(this);

      $.ajax({
        type:'POST',
        url: 'crud.php',
        data:formData,
        cache:false,
        contentType: false,
        processData: false,

        success:function(msg){
          console.log(msg);

        },
      });
    }));

    var data = [{"value":"1","label":"PHP"},{"value":"2","label":"Python"},{"value":"3","label":"Java"},{"value":"4","label":"ActionScript"},{"value":"5","label":"LUA"}];

   // console.log(data);


    $('#example-tags_tag').autocomplete({


      source: data,
        
      focus: function( event, ui ) {
       $( "#example-tags_tag" ).val( ui.item.label );
 
       return false;
     },

     select: function( event, ui ) {

      tagExist = function(c) {
        var d = '#cat-id',
        e = $("#cat-id").val().split(',');
        return jQuery.inArray(c, e) >= 0
      }
 

      var verid = tagExist(ui.item.value);
   

      if(verid != 1){
        if( $("#cat-id").val() != '')
        {
          $("#cat-id").val( $("#cat-id").val() + ',' + ui.item.value);
        }
        else
        {
          $("#cat-id").val(ui.item.value);
        }

      }

      else{


        $("#cat-id").val();
      }

      return false;

    }

  });       


  });

  /*
==============================================
(#14tis) Jquery Tags Input
==============================================
*/

div.tagsinput {
    background: #ffffff;
    width: 100%;
    height: auto;
    padding: 6px 8px 0;
    border: 1px solid #dbe1e8;
    border-radius: 4px;
}

div.tagsinput span.tag {
    border: 1px solid #1bbae1;
    background-color: #1bbae1;
    color: #ffffff;
    font-weight: 600;
    border-radius: 2px;
    display: block;
    float: left;
    padding: 0 20px 0 5px;
    height: 20px;
    line-height: 18px;
    text-decoration: none;
    margin-right: 4px;
    margin-bottom: 6px;
    font-size: 12px;
    position: relative;
}

div.tagsinput span.tag a {
    position: absolute;
    color: #ffffff;
    display: block;
    top: 0;
    right: 5px;
    font-weight: bold;
    text-decoration: none;
    font-size: 12px;
    line-height: 16px;
    height: 20px;
    width: 10px;
    text-align: center;
}

div.tagsinput span.tag a,
div.tagsinput span.tag a:hover,
div.tagsinput span.tag a:focus {
    color: #ffffff;
    text-decoration: none;
}

div.tagsinput input {
    width: 80px;
    margin: 0px;
    font-family: helvetica;
    font-size: 12px;
    border: 1px solid transparent;
    padding: 0 5px;
    height: 20px;
    line-height: 20px;
    background: transparent;
    outline: 0;
    margin-right: 4px;
    margin-bottom: 6px;
}

div.tagsinput div {
    display: block;
    float: left;
}

div.tagsinput:before,
div.tagsinput:after {
    content:" ";
    display:table;
}

div.tagsinput:after {
    clear:both;
}

.not_valid {
    background: #fbd8db !important;
    color: #90111a !important;
}

 <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.js"></script>


  
  <div class="container">
   <div class="row">
     <form action="" method="post" enctype="multipart/form-data" id="form-add" name="form_add" class="form-horizontal form-bordered" onsubmit="return false;">
      <input type='hidden' name='action' value='add'> 

      <div class="form-group">
       <label class="col-md-3 control-label">Categories</label>
       <div class="col-md-9">
         <input type="text" id="example-tags" name="categorie" class="input-tags" value="">
         <input type="hidden" id="cat-id" name="catid" />
       </div>
       e.g.(PHP, Python, Java, ActionScript, LUA)
     </div>





     <div class="form-group form-actions">
       <div class="col-md-9 col-md-offset-3">
        <button type="submit" class="btn btn-primary" id="envio"><i class="fa fa-pencil"></i> Adicionar</button>
        <button type="reset" class="btn btn-warning"><i class="fa fa-repeat"></i> Reset</button>
      </div>
    </div>

  </form>
</div>

</div>

Answer 1

There is a function onRemoveTag for tagsInput which you can use to find the id element and remove it

documentation here https://github.com/xoxco/jQuery-Tags-Input

i have created a sample here

I have basically searched using the function `

searchArray

for the id value based in the tag being removed

function searchArray(nameKey, myArray) {
  for (var i = 0; i < myArray.length; i++) {
    if (myArray[i].label === nameKey) {
      return myArray[i].value;
    }
  }
  return "";
}

this returns the value for the label

and here is the function for onRemoveTag callback function

 'onRemoveTag': function(data1) {
      var value = searchArray(data1, data);
      var e = $('#cat-id').val().split(',')
      var index = e.indexOf(value);
      if (index > -1) {
        e.splice(index, 1);
      }
      $('#cat-id').val(e.join(','))
      console.log($('#cat-id').val())
    }

here is a jsfiddle for it https://jsfiddle.net/fxabnk4o/19/

hope this helps