Question

我有一个文本输入，每次用户选择一个新标签时都会更新（新建一个新的列表元素），这些列表元素被映射到逗号分隔列表，然后将其添加到文本输入的值中。

文本输入的值可能如下所示

PHP，C＃，C，C ++

用户可以点击标签将其从文本输入中删除，但是我无法将其从输入字段的逗号分隔列表中删除。

我的代码对于标签删除方法看起来像这样。

var array = $("#job_tags_input").val().split(",");

我虽然这会在我的输入中给出一个值数组，但是我在控制台中得到的所有内容都是我的控制台.log（数组）是，

[“C”，“PHP”，“Perl”，“C＃”，“”]

如果删除了“C”的标记，我该如何从输入字段中删除它？

MY JS

if($("#job_tags").get(0)) {
    $("#job_tags").tagHandler({
        assignedTags: [ 'C', 'Perl', 'PHP' ],
        availableTags: [ 'C', 'C++', 'C#', 'Java', 'Perl', 'PHP', 'Python' ],
        autocomplete: true,
        onAdd: function(tag) { 
            var s = $("#job_tags li").map(function(){
                return $(this).text();
            }).get().join(",");
            s = s.substring(0, s.length - 1);
            console.log(s);
            $('#job_tags_input').val(s);
        },
        onDelete: function(tag) { 
            /*$("#job_tags_input").val( $("#job_tags li").map(function(){
                return $(this).text();
            }).get().join(", "));*/
            var array = $("#job_tags_input").val().split(",");
            array = $.grep(array, function(value, i) {
                return ( value.indexOf(tag) == 0 );
            });
            array = array.join(",");
            console.log(array);
            $('#job_tags_input').val(array);
        }

    });
}

Answer 1

您可以先拼接项目：

array.splice(array.indexOf("C"), 1); // remove one item at the position of "C"

然后将元素连接在一起并更新文本框：

$("#job_tags_input").val(array.join()); // uses "," by default

但是，你最好在", "分割，因为这个空格是分隔符的一部分。

Answer 2

如果您使用的是jQuery，有几种方法会有所帮助。你可以在没有空格的情况下split（）并使用$ .trim（）来清理空格，因为空格可能存在也可能不存在。

$。grep（）可用于过滤数组并返回新数组。

Answer 3

尝试以下代码检查indexOf已移除的代码，然后从列表中查看splice代码。然后通过加入拼接列表来设置输入的值。

DEMO

var curSelection = $('#job_tags_input').val().split(",");
var elIndex = curSelection.indexOf(t);

if (elIndex >= 0) {
    curSelection.splice(elIndex , 1);
    $('#job_tags_input').val(curSelection.join());
}

$('#job_tags_input').val(curSelection.join());

下面的函数是针对Array.indexOf，

//Below code is from http://stackoverflow.com/a/144172/297641
if (!Array.prototype.indexOf) {
  Array.prototype.indexOf = function (obj, fromIndex) {
    if (fromIndex == null) {
        fromIndex = 0;
    } else if (fromIndex < 0) {
        fromIndex = Math.max(0, this.length + fromIndex);
    }
    for (var i = fromIndex, j = this.length; i < j; i++) {
        if (this[i] === obj)
            return i;
    }
    return -1;
  };
}

逗号分隔的字符串

3 个答案: