JSFiddle - React, Tailwind, and code Playground

by martinwolf

HTML

<input type="text" size="20" class="tagMe" value='eins,zwei,drei' />
<input type="text" size="20" class="tagMe" value='one,two,three' />
<input type="text" size="20" class="tagMe" value='uno, dos, tres' />
<input type="text" size="20" class="tagMe" value='bir,iki,üc' />

<input type="text" size="20" class="tagMeSemicolon" value='bir;iki;üc' />

<div class="tagMe">one,two,three</div>

SCSS

* {
    margin: 0;
    padding: 0;
}

.tag {
    display: inline-block;
    margin-right: 5px;
    padding: 5px 10px;
    background: #efefef;
}

.row {
    position: relative;
    margin: 0 0 10px;
    width: 100%;
    height: 35px;
    border: 1px solid #69b369;
    
    ul {
        display: inline-block;
    }
    
    input {
        display: inline-block;
        height: 35px;
        border: 0;
        
        &:focus {
            outline: none;
        }
    }
}

JavaScript

(function ( $ ) {

    $.fn.tagMe = function(options) {
        
        // Use default options
        var opts = $.extend( {}, $.fn.tagMe.defaults, options );

        return this.each(function(index, elem) {
            
            if ( $(elem).is('input') ) {
            
                var inputText = $(this).val();
                var inputsArray = inputText.split(opts.separator);
                
                var inputsArray = $(inputsArray).map(String.prototype.trim);
                
                $(this).wrap('<div class="row">');
                $(this).parent('.row').prepend('<ul>');
                $(this).val('');
                
                $.each( inputsArray, function(i, l) {
                    $(elem).prev('ul').append('<li class="tag">' + l + ' <a href="javascript:;" class="delete">x</a></li>');
                });
                
                // Press Enter
                $(elem).keypress(function(event) {
                    var keycode = (event.keyCode ? event.keyCode : event.which);
                    if (keycode == '13') {
                        var newTag = $(this).val();
                        $(elem).prev('ul').append('<li class="tag">' + newTag + ' <a href="javascript:;" class="delete">x</a></li>');
                        $(elem).val('');
                        
                        // Ajax Stuff
                        /*$.ajax({
                            type: 'POST',
                            url: 'http://jsfiddle.net',
                            data: { 
                                'name': newTag
                            },
                            success: function(){
                                alert('Tag Saved');
                            }
                        });*/
                    };
                });
                    
                // Delete tags
                $(document).on("click", ".delete", function() {
                    $(this).parent().remove();
          ...