JSFiddle - React, Tailwind, and code Playground

by iBertel

HTML

<div class="wrap">
    <input id="input" type="text" placeholder="search">
    <button id="search" type="button">Add</button>
    <div class="tags-wrap">
        <div id="tags"></div>
        <button id="clear">Clear</button>
    </div>
</div>

CSS

.tags-wrap {
    background-color:#567;
    padding:10px;
}
#tags {
    overflow:hidden;
}
#tags > span {
    background-color:#F20;
    color:#fff;
    padding:5px;
    margin-right:5px;
    margin-bottom:5px;
    float:left;
    display:block;
}

JavaScript

$('#search').on('click', function () {

    var markup = inputTags($('#input').val());

    $('#tags').append(markup);
    $('input').val('');

});

$('#clear').on('click', function () {
    $('#tags').html("");
});

function inputTags(input) {

    //Trim removes spacing before typing and the last space after typing.
    input = $.trim(input);
    //Removes special characters like ?,. etc.
    input = input.replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, ' ');

    if (input.length === 0) return;

    var res = input.split(" ");
    var output = "";

    for (i = 0; i < res.length; i++) {
        output = output + "<span>" + res[i] + "</span>";
    }

    console.log(output)
    return output;
}

$('#input').on('keyup', function (e) {
    if (e.keyCode === 13) {
        $('#search').click();
    }
});