引导标记输入-没有从标签输入中删除值

Question

每当单击bootstrap-tags-input按钮时，我都会尝试手动从x中删除输入值，但是值既不会从输入中得到更改，也不会从数组中得到。

这是我尝试过的代码：

​

$('input').tagsinput({
  allowDuplicates: true
});
//on click of remove button
$(document).on("click", ".label-info span[data-role=remove]", function() {
  //remove that spn
  var to_remove = $(this).closest(".label-info").clone().children().remove().end().text().trim()
  console.log($("[name=tags]").val())
  //if i put here inisde split `,` not working as well
  var values = $("[name=tags]").val().split(';')
  console.log("to remove ---" + to_remove)
  $(this).closest(".label-info").remove()
  console.log("input box values--" + $("[name=tags]").val())
  for (var i = 0; i < values.length; i++) {
    if (values[i] == to_remove) {
      values.splice(i, 1);
      return true;
    }
  }
  console.log("after splice--" + values)
  $(this).closest(".label-info").remove()
  $("[name=tags]").val(values)
  console.log("After setting new values--" + $("[name=tags]").val())
})

$('input').on('beforeItemRemove', function(e) {
  e.cancel = true; //set cancel to false..
});

.label-info {
  background-color: #17a2b8;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha256-aAr2Zpq8MZ+YA/D6JtRD3xtrwpEz2IqOS+pWD/7XKIw=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" integrity="sha512-xmGTNt20S0t62wHLmQec2DauG9T+owP9e6VU8GigI0anN7OXLip9i7IwEhelasml2osdxX71XcYm6BQunTQeQg==" crossorigin="anonymous"
/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha256-OFRAJNoaD8L3Br5lglV7VyLRf0itmoBzWUoM+Sji4/8=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js" integrity="sha512-VvWznBcyBJK71YKEKDMpZ0pCVxjNuKwApp4zLF3ul+CiflQi6aIJR+aZCP/qWsoFBA28avL5T5HA+RE+zrGQYg==" crossorigin="anonymous"></script>

<input type="text" data-role="tagsinput" name="tags" class="form-control">

​

我认为从输入框中得到的值是不正确的，即:格式不正确，因为当我执行values.length后，它总是以1的形式给出值。

编辑1：

我尝试使用split(',')，它正在从数组中删除数据，但在循环代码和输入框中的值不包括remove之后没有打印任何console结果。

更新代码：

$(document).on("click", ".label-info span[data-role=remove]", function() {
  var to_remove = $(this).closest(".label-info").clone().children().remove().end().text().trim()
  console.log($("[name=tags]").val())
  var values = $("[name=tags]").val().split(',')
  console.log("to remove ---" + to_remove)
  $(this).closest(".label-info").remove()
  console.log("input box values--" + $("[name=tags]").val())
  for (var i = 0; i < $("[name=tags]").val().split(',').length; i++) {
    if (values[i] == to_remove) {
      values.splice(i, 1);
      console.log("i am in")
      return;
    }
  }
  //why thse consoles do not get printed ??
  console.log("after splice--" + values)
  $(this).closest(".label-info").remove()
  $("[name=tags]").val(values)
  console.log("After setting new values--" + $("[name=tags]").val())
})

谢谢你的帮助。

Answer 1

来自引导标记输入源代码的133号线：

// register item in internal array and map
  self.itemsArray.push(item);

这意味着您输入到文本框中的值被保存到一个内部对象中，您可以看到它是tagsinput。如果在不更改内部对象的情况下更改输入框的值，则不会同步文本和内部对象。这样您就不会删除任何值。此外，文本框是隐藏的，您可以看到并使用div操作。

相反，使用以下方法获取值：

var values = $("[name=tags]").val().split(';')

您可以使用itemsArray属性的标签输入数据对象：

var values = $("[name=tags]").data('tagsinput').itemsArray;

现在您可以直接使用这个数组了。

为了删除元素，可以使用.index()而不是for循环：

var idx = $(this).closest(".label-info").index();
values.splice(idx, 1);

片段：

​

$('input').tagsinput({
    allowDuplicates: true
});
//on click of remove button
$(document).on("click", ".label-info span[data-role=remove]", function () {


    var values = $("[name=tags]").data('tagsinput').itemsArray;
    console.log(values);
    console.log("input box values--" + $("[name=tags]").val());

    // synchronize  internal object and input text
    var idx = $(this).closest(".label-info").index();
    values.splice(idx, 1);
    $("[name=tags]").val(values);

    //remove that spn
    $(this).closest(".label-info").remove();

    console.log("after splice--" + values)
    console.log("After setting new values--" + $("[name=tags]").val())
})

$('input').on('beforeItemRemove', function (e) {
    e.cancel = true; //set cancel to false..
});

.label-info {
    background-color: #17a2b8;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"></script>

<input type="text" data-role="tagsinput" name="tags" class="form-control">

​

Answer 2

您可以在循环中写入返回。它的退出功能。所以有些代码无法执行。在第一个代码中，当拆分( ";“)时，字符串不具有”；“因此它不被拆分。因此，在for循环中，values[i] == to_remove不为真，因此返回不执行。使用中断退出循环。如果不是所有相同的值都将被删除。

​

$('input').tagsinput({
  allowDuplicates: true
});
//on click of remove button
$(document).on("click", ".label-info span[data-role=remove]", function() {
  //remove that spn
    var to_remove = $(this).closest(".label-info").clone().children().remove().end().text().trim()
    var valuesString =$("[name=tags]").val();
    console.log(valuesString);
    var values = valuesString.split(',');
    console.log("before remove ---" + values)
    console.log("to remove ---" + to_remove)
    $(this).closest(".label-info").remove()
    console.log("input box values--" + $("[name=tags]").val())
    var i = $(this).closest(".label-info").index();
    values.splice(i, 1);
    //for (var i = 0; i < values.length; i++) {
    //  if (values[i] == to_remove) {
    //     values.splice(i, 1);
    //     break;
       //      return true;
    //  }
    //}
    console.log("after splice--" + values);
    $(this).closest(".label-info").remove();
    $("[name=tags]").val(values);
    $("[name=tags]").data('tagsinput').itemsArray = values;
    console.log("After setting new values--" + $("[name=tags]").val());
 })

$('input').on('beforeItemRemove', function(e) {
  e.cancel = true; //set cancel to false..
});

.label-info {
  background-color: #17a2b8;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha256-aAr2Zpq8MZ+YA/D6JtRD3xtrwpEz2IqOS+pWD/7XKIw=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" integrity="sha512-xmGTNt20S0t62wHLmQec2DauG9T+owP9e6VU8GigI0anN7OXLip9i7IwEhelasml2osdxX71XcYm6BQunTQeQg==" crossorigin="anonymous"
/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha256-OFRAJNoaD8L3Br5lglV7VyLRf0itmoBzWUoM+Sji4/8=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js" integrity="sha512-VvWznBcyBJK71YKEKDMpZ0pCVxjNuKwApp4zLF3ul+CiflQi6aIJR+aZCP/qWsoFBA28avL5T5HA+RE+zrGQYg==" crossorigin="anonymous"></script>

<input type="text" data-role="tagsinput" name="tags" class="form-control">

​

Answer 3

您输入的值保存在"tagsinput“对象中。

您可以在每次更改输入时同时更新文本和对象，如某些答复中提到的那样。

但是，可能是最好的方法，将抛弃正在加载的tagsinput，并将其替换为将为您处理此问题的另一个插件。

例如，这里 --您可以简单地使用editable选项来实现您的目标，并且可以在最新的Bootstrap 5中与纯JavaScript一起使用它，如果您也希望抛弃jQuery (我建议这样做)，但是即使使用jQuery，这个仍然有效。