Jquery 有逗号时使用单独的标记

我想在输入[type=text]中键入tag，tag，tag并单击/按ADD按钮时，结果将是3个标签。并避免重复标签

<div class="upload-input-tag clearfix">
    <input class="form-control" type="text" name="tag" placeholder="Tags">
    <button type="button" class="btn add-tag">ADD</button>
    <span>Separate tags with commas</span>
</div>
<!-- content for added tag -->
<div class="upload-added-tag">
    <div class="added-tag"><button type="button" class="remove-tag btn"><i class="zmdi zmdi-close-circle"></i></button>hiphop</div>
    <div class="added-tag"><button type="button" class="remove-tag btn"><i class="zmdi zmdi-close-circle"></i></button>bezells</div>
    <div class="added-tag"><button type="button" class="remove-tag btn"><i class="zmdi zmdi-close-circle"></i></button>streets</div>
    <div class="added-tag"><button type="button" class="remove-tag btn"><i class="zmdi zmdi-close-circle"></i></button>dream</div>
    <div class="added-tag"><button type="button" class="remove-tag btn"><i class="zmdi zmdi-close-circle"></i></button>visuals</div>
    <div class="added-tag"><button type="button" class="remove-tag btn"><i class="zmdi zmdi-close-circle"></i></button>sauce</div>
</div>

添加
用逗号分隔标记
嘻哈音乐
边框
街道
梦想
视觉效果
酱

JQUERY

$（“.add tag”）。单击（函数（）{
var newTag=$.trim（$（'.upload-input-tag-input'）.val（））；
if（！newTag）return；//避免添加空div
var newAddedTag=''+newTag+''；
$（“.upload added tag”）.append（newAddedTag）；
$（“.upload-input-tag-input”）.val（“”）；//清除值
$（'.remove tag'）。在（'click'，function（）上{
$（this.parent（）.remove（）；
});
});

添加和删除标记工作正常，我想添加到jQuery中的是检测如果我在输入中使用逗号（，），它将分开，如果避免重复标记，但我没有足够的能力使其工作。我还在学习JS/jQuery:D

谢谢你的帮助

---

您可以对

，

字符进行拆分。这将创建一个文本对象数组。然后您可以遍历这些对象，并为每个对象创建一个元素。为避免重复标记，请使用计数器为每个元素添加属性

$(".add-tag").click(function(){
  var newTag = $.trim( $('.upload-input-tag input').val() );
  if (!newTag) return; //avoid adding empty div
  var tags = newTag.split(','); //CREATE AN ARRAY BASED ON COMMA PLACEMENT
  for (var i in tags) { 
    //THE USE OF  id="tag-' + i + '" WILL PREVENT DUPLICATE TAGS
    var newAddedTag = '<div class="added-tag" id="tag-' + i + '"><button type="button" class="remove-tag btn"><i class="zmdi zmdi-close-circle"></i></button>' + tag[i] +'</div>'; 
    $(".upload-added-tag").append(newAddedTag);
  }
  $(".upload-input-tag input").val(''); //clearing value
  $('.remove-tag').on('click', function(){
    $(this).parent().remove();
  });
});

$（“.add tag”）。单击（函数（）{
var newTag=$.trim（$（'.upload-input-tag-input'）.val（））；
if（！newTag）return；//避免添加空div
var tags=newTag.split（'，'）；//基于逗号位置创建数组
对于（标签中的变量i）{
//使用id=“tag-'+i+'”将防止重复标记
var newAddedTag=''+标记[i]+''；
$（“.upload added tag”）.append（newAddedTag）；
}
$（“.upload-input-tag-input”）.val（“”）；//清除值
$（'.remove tag'）。在（'click'，function（）上{
$（this.parent（）.remove（）；
});
});

我建议检查多个键码（当它们按enter键、tab键或其他键时，您可能希望创建标记）

根据选择的键，可能需要将其从传递到下一个函数的值（如逗号）中删除。只需使用

String.slice（）

即可

从这里开始，只需使用一个新函数来生成标记。您还可以检查该函数内部的现有标记，但我建议将标记文本包装到元素中以便于引用

function makeTag(value){
    var html = '<button type="button" class="remove-tag btn"><i class="zmdi zmdi-close-circle"></i></button><span>' + value +'</span></div>';
    var existing = $('.upload-added-tag .added-tag span').map(function(){return $(this).text()}).get();
    if(existing.indexOf(value) < 0){
         $('<div/>').addClass('.added-tag').html(html).appendTo('.uploaded-added-tag');

    }
}

函数makeTag（值）{
var html=''+值+''；
var existing=$（'.upload added tag.added tag span'）.map（函数（）{return$（this.text（）}）.get（）；
if（现有索引of（值）<0）{
$（''）.addClass（'.added tag'）.html（html）.appendTo（'.upload added tag'）；
}
}

---

现有的

变量可能看起来很奇怪，但是当您想要创建一个保存在jQuery对象中的值数组时，它非常有用。
在“var newAddedTag”的行上有一个错误，该行表示这个自定义的.js:128 Uncaught ReferenceError:标记未在HtmlButtoneElement中定义。（custom.js:128）在HTMLButtonElement.dispatch（jquery.min.js:3）在HTMLButtonElement.q.handle（jquery.min.js:3）我喜欢keycode的想法，但是你提供的代码不起作用，我只有使用enter（9）才有我的代码，但是当我尝试添加更多的时候它不起作用{var key=e.which；if（key==13）//输入键代码{$（'.add tag'）。单击（）；返回false；}}）；

$('input[name="tag"]').on('keyup', function(e){
    var breakKeys = [9, 188, 13]; //add less or more codes from http://keycode.info/
    if(breakKeys.indexOf(e.keyCode) >= 0 && $(this).val() !== ''){
        makeTag($(this).val())
    }
})

function makeTag(value){
    var html = '<button type="button" class="remove-tag btn"><i class="zmdi zmdi-close-circle"></i></button><span>' + value +'</span></div>';
    var existing = $('.upload-added-tag .added-tag span').map(function(){return $(this).text()}).get();
    if(existing.indexOf(value) < 0){
         $('<div/>').addClass('.added-tag').html(html).appendTo('.uploaded-added-tag');

    }
}