我无法将输入值设置为“筹码”

Question

我有以下输入，例如两个值

 <input id="input" type="text" />

let input = document.getElementById('input');
console.log(input);
input.value = 'John Peter';

我希望这个输入值在我的输入上方显示为筹码，但我找不到方法 - 如何设置我输入中的值的样式。我需要这样做，因为我有自动完成功能，当我点击输入时，会打开额外的窗口，我可以在其中选择选项。

当我选择某个选项时，它需要在输入上方显示为 CHIP。

类似

https://material.angular.io/components/chips/examples

所以我的芯片样式看起来像这样

.chip {
    display: inline-block;
    padding: 0 18px;
    font-size: 14px;
    border-radius: 25px;
    background-color: #e0e0e0;
    font-weight: 600;
    min-height: 32px;
    display: flex;
    align-items: center;
    color: rgba(0, 0, 0, 0.87);
    transition: 0.2s all ease;
    width: 60px;
}

.chip img {
    float: left;
    margin: 0 10px 0 -25px;
    height: 32px;
    width: 32px;
    border-radius: 50%;
}

.closebtn {
    color: #888;
    font-weight: bold;
    font-size: 20px;
    cursor: pointer;
    background-color: #0a0a0a;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    color:#ffffff;
    position: relative;
    color: rgba(0,0,0,.87);
    opacity: .5;
    margin-left: 10px;
}

.close-icon {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -60%);
  color:#704e4e;
}

.closebtn:hover {
    color: #000;
}

<div class="chip">
  <span class="chip-text">Peter</span>
  <div class="closebtn"><span class="close-icon">&times;</span>
  </div>
</div>

如何使输入 John and Peter 上的值在我的输入上显示为两个 chips？

Answer 1

以下实现了您想要的。它会为您开始使用的每个名称（John 和 Peter）创建 1 个筹码。然后将一个 on change 监听器附加到输入以获取任何新名称并创建一个芯片。

document.getElementById('input').addEventListener('change', function () {
  createChip(this.value);
  this.value = '';
});

['John', 'Peter'].forEach(createChip);

function createChip(val) {
  const el = document.createElement('li');
  el.innerText = val;
  document.getElementById('chips').appendChild(el);
}

#chips {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}
#chips li {
    display: inline-block;
    padding: 0 18px;
    font-size: 14px;
    border-radius: 25px;
    background-color: #e0e0e0;
    font-weight: 600;
    min-height: 32px;
    display: flex;
    align-items: center;
    color: rgba(0, 0, 0, 0.87);
    transition: 0.2s all ease;
    width: 60px;
}
#chips li::after {
  content: '\00D7';
  position:  relative;
  right: -25px;
  top: -10px;
  font-weight: bold;
  font-size: 20px;
  cursor: pointer;
  border-radius: 50%;
  color: rgba(0,0,0,.2);
  opacity: .5;
}
#chips li:hover::after {
    color: #000;
}
#input {
  border: none;
}

<ul id="chips"></ul>
<input id="input" type="text" />

Answer 2

• 不要为芯片设置宽度，它不会被内容溢出，所以添加填充而不是宽度