How to make a text input field take in keywords? [closed]

Question

In semantic UI, when using the dropdown component, once you make a selection, it selects the word and appears as a keyword select as shown, allowing for multiple selections:

How can this be done with a text field that takes in any input, and after the user presses enter it will create a selection in the gray box similar to semantic ui? I need to allow this for multiple custom text inputs. Thanks in advance to anyone that can help.

Answer 1

Your description inspired me to implement this feature. Here's what I came up with:

function multiSearchKeyup(inputElement) {
    if(event.keyCode === 13) {
        inputElement.parentNode
            .insertBefore(createFilterItem(inputElement.value), inputElement)
            ;
        inputElement.value = "";
    }
    function createFilterItem(text) {
        const item = document.createElement("div");
        item.setAttribute("class", "multi-search-item");
        const span = `<span>${text}</span>`;
        const close = `<div class="fa fa-close" onclick="this.parentNode.remove()"></div>`;
        item.innerHTML = span+close;
        return item;
    }
}

.multi-search-filter{
    border:1px solid #DDD;
    border-radius: 3px;
    padding:3px;
    min-height: 26px;
}
.multi-search-filter > input {
    border: 0px;
    outline: none;
    font-size: 20px;
}
.multi-search-item {
    margin: 2px;
    padding: 2px 24px 2px 8px;
    float: left;
    display: flex;
    background-color: rgb(204, 204, 204);
    color: rgb(51, 51, 51);
    border-radius: 3px;
    position: relative;
}
.multi-search-item > span {
    font-family: 'Muli';
    line-height: 18px;
}
.multi-search-item > .fa {
    font-size: 12px;
    line-height: 18px;
    margin-left: 8px;
    position: absolute;
    right: 8px;
    top: 2px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Muli&display=swap" rel="stylesheet">
<div class="multi-search-filter" onclick="Array.from(this.children).find(n=>n.tagName==='INPUT').focus()">
    <input type="text" onkeyup="multiSearchKeyup(this)">
</div>