Question

当我在输入[type = text]中输入 标记，标记，标记 并点击/按添加按钮时，我想这样做结果将是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").click(function(){
  var newTag = $.trim( $('.upload-input-tag input').val() );

  if (!newTag) return; //avoid adding empty div
    var newAddedTag = '<div class="added-tag"><button type="button" class="remove-tag btn"><i class="zmdi zmdi-close-circle"></i></button>' + newTag +'</div>';   

    $(".upload-added-tag").append(newAddedTag);

    $(".upload-input-tag input").val(''); //clearing value

    $('.remove-tag').on('click', function(){
      $(this).parent().remove();
    });
  });

添加和删除标记工作正常，我要添加到jQuery的是检测如果我在输入中使用逗号（，）它将分开并且如果避免重复标记但是我不够好使它工作。我还在学习JS / jQuery：D

感谢您的帮助！

Answer 1

我建议检查多个密钥代码（您可能希望在输入或标签或其他密钥时制作代码）。

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

根据您选择的密钥，您可能需要将其从传递给下一个函数的值中删除（如逗号）。只需使用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');

    }
}

existing变量可能看起来很奇怪，但是当你想要创建一个保存在jQuery对象中的值数组时，它会非常有用。

Answer 2

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

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

有逗号时单独标记TAG

2 个答案: