自動完成刪除值

Question

我正在使用自動填充和「TagsInput」插件，我遇到了一個我無法解決的問題。所選類別在隱藏字段（＃cat-id）中傳遞值，但在刪除類別時我無法刪除該值。

我想從輸入中刪除一個類別時，也刪除它在隱藏字段中的值。

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

\t <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'> \t 
 

 
     <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

有一個功能onRemoveTag爲tagsInput，你可以用它來找到id元素，將其取下

文檔在這裏https://github.com/xoxco/jQuery-Tags-Input

我創建這裏的樣本

我已經基本使用功能`

搜索searchArray

的id值基於在標籤被取下

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

這個返回標籤值

這裏是onRemoveTag回調函數的功能

'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()) 
    } 

這裏是一個的jsfiddle它https://jsfiddle.net/fxabnk4o/19/

希望這有助於