如何实现输入框自动完成选中值以chips标签形式显示在输入框上方

第一步：调整HTML结构 #

你需要在输入框上方新增一个专门存放chips的容器，建议把容器和输入框包裹在同一个父级元素内方便布局：

<!-- 父容器 -->
<div class="chips-input-wrapper">
  <!-- chips存放容器 -->
  <div id="chipsContainer" class="chips-container"></div>
  <!-- 原有输入框 -->
  <input id="input" type="text" placeholder="输入或选择内容"/>
</div>

第二步：优化CSS样式 #

需要补充容器样式，同时修正原有chip样式的固定宽度问题，避免文字被截断：

/* 新增父容器样式 */
.chips-input-wrapper {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
/* 新增chips容器样式 */
.chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* 修正原有chip的固定宽度问题 */
.chip {
  display: inline-flex;
  padding: 0 12px;
  font-size: 14px;
  border-radius: 25px;
  background-color: #e0e0e0;
  font-weight: 600;
  min-height: 32px;
  align-items: center;
  color: rgba(0, 0, 0, 0.87);
  transition: 0.2s all ease;
  width: fit-content; /* 自动适配文字宽度 */
}
/* 原有其他CSS样式保留即可 */
.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;
  position: relative;
  opacity: .5;
  margin-left: 10px;
}
.close-icon {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -60%);
  color:#704e4e;
}
.closebtn:hover {
  color: #000;
}
/* 输入框去掉默认边框，和父容器融合 */
#input {
  border: none;
  outline: none;
  flex: 1;
  min-width: 120px;
  padding: 8px 4px;
}

第三步：编写JS逻辑实现功能 #

首先实现初始值拆分生成chips、删除chips的功能，再对接你的自动完成逻辑即可：

const input = document.getElementById('input');
const chipsContainer = document.getElementById('chipsContainer');

// 1. 封装生成chip的通用方法
function createChip(text) {
  const chip = document.createElement('div');
  chip.className = 'chip';
  chip.innerHTML = `
    <span class="chip-text">${text}</span>
    <div class="closebtn">
      <span class="close-icon">&times;</span>
    </div>
  `;
  // 绑定删除事件
  chip.querySelector('.closebtn').addEventListener('click', () => {
    chip.remove();
  });
  return chip;
}

// 2. 初始值拆分生成chips
const initValue = 'John Peter';
// 按空格拆分多个姓名，过滤掉空值
const nameList = initValue.split(' ').filter(name => name.trim());
nameList.forEach(name => {
  const chip = createChip(name);
  chipsContainer.appendChild(chip);
});
// 初始值处理完后清空输入框，避免重复显示
input.value = '';

// 3. 对接你的自动完成逻辑
// 你的自动完成选中事件触发时，调用以下代码即可新增chip
// 示例：假设你自动完成选中后拿到的选中值是selectedItem
// input.addEventListener('autocompleteSelect', (e) => {
//   const selectedName = e.detail.value;
//   const chip = createChip(selectedName);
//   chipsContainer.appendChild(chip);
//   input.value = ''; // 选中后清空输入框
// })

核心逻辑说明 #

• 输入框本身无法单独给内部部分文字设置样式，因此我们采用「chips容器+输入框」的组合方案，所有选中的内容都以独立dom元素的形式放在容器中，输入框仅保留用户输入、触发自动完成的功能
• 后续如果需要提交所有选中的chip值，可以遍历chipsContainer下的.chip-text元素，提取所有文本内容拼接即可

内容的提问来源于stack exchange，提问作者Petar