如何使文本输入字段包含关键字？

Question

在语义 UI 中，当使用下拉组件时，一旦您进行选择，它就会选择该单词并显示为关键字选择，如图所示，允许多项选择：

如何使用接受任何输入的文本字段来完成此操作，并且在用户按下 Enter 键后，它将在类似于语义 ui 的灰色框中创建一个选择？我需要允许多个自定义文本输入。预先感谢任何可以提供帮助的人。

Answer 1

您的描述启发了我实现此功能。这是我想出的：

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>