引导标签输入 - 值不会从标签输入中删除

Question

每当单击 x 按钮时，我试图手动从 bootstrap-tags-input 中删除输入值，但值既不会从 array 也不会从 inputs 更改。

这是我尝试过的代码：

$('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(',')，它正在从数组中删除数据，但在 for 循环代码和输入框中的值之后不打印任何 console 结果也不是remove。

更新代码：

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

来自bootstrap-tagsinput source code 第 133 行：

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

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

而不是通过以下方式获取值：

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

您可以使用 tagsinput 数据对象的 itemsArray 属性：

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

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

要删除元素，您可以使用.index() 代替 for 循环：

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

sn-p：

$('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循环中写return。它退出功能。所以有些代码无法执行。 在 split(";") 时的第一个代码中，字符串没有“;”所以它没有分裂。 因此在 for 循环中 values[i] == to_remove 永远不会为真，因此 return 不会执行。使用 break 退出 for 循环。如果不是所有相同的值都将被删除。

$('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 插件，并将其替换为可以为您处理此问题的其他插件。

例如，here 你可以简单地使用editable 选项来实现你的目标，如果你也想放弃 jQuery，你可以在最新的 Bootstrap 5 中将它与纯 JavaScript 一起使用（我推荐） ，但即使使用 jQuery，这个仍然有效。