在语义UI中,当使用下拉组件时,一旦进行选择,它将选择单词并显示为关键字select,如图所示,允许进行多项选择:
如何用一个接受任何输入的文本字段来完成此操作,在用户按下Enter键后,它将在灰色框中创建一个类似于语义ui的选择?我需要允许多个自定义文本输入。预先感谢任何可以提供帮助的人。
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>