<div class="tag-input-container">
  <!-- 已添加的标签容器 -->
  <div class="tags-container" id="tags-container"></div>
  <!-- 标签输入框 -->
  <input 
    type="text" 
    list="tag-datalist" 
    placeholder="添加标签（按Enter确认）..." 
    class="tag-input"
    id="tag-input"
  >
</div>
<datalist id="tag-datalist">
  <option value="前端开发"></option>
  <option value="JavaScript"></option>
  <option value="CSS"></option>
  <option value="HTML"></option>
  <option value="React"></option>
  <option value="Vue"></option>
  <option value="TypeScript"></option>
</datalist>


<style>
  .tag-input-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    width: 500px;
    margin: 2rem;
  }


  .tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
  }


  .tag-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    background: #f0f7ff;
    color: #4a90e2;
    border-radius: 4px;
    font-size: 0.9rem;
  }


  .tag-remove-btn {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0;
  }


  .tag-remove-btn:hover {
    color: #4a90e2;
  }


  .tag-input {
    flex: 1;
    min-width: 120px;
    padding: 0.5rem;
    border: none;
    outline: none;
    font-size: 0.9rem;
  }
</style>


<script>
  const tagsContainer = document.getElementById("tags-container");
  const tagInput = document.getElementById("tag-input");
  // 存储已添加的标签（去重）
  let addedTags = new Set();


  // 添加标签函数
  const addTag = (tagText) => {
    const trimmedTag = tagText.trim();
    // 过滤空值和重复标签
    if (!trimmedTag || addedTags.has(trimmedTag)) return;
    
    // 1. 存储标签
    addedTags.add(trimmedTag);
    
    // 2. 创建标签元素
    const tagElement = document.createElement("div");
    tagElement.className = "tag-item";
    tagElement.innerHTML = `
      ${trimmedTag}
      <button class="tag-remove-btn" data-tag="${trimmedTag}">×</button>
    `;
    tagsContainer.appendChild(tagElement);
    
    // 3. 绑定删除事件
    tagElement.querySelector(".tag-remove-btn").addEventListener("click", (e) => {
      const tagToRemove = e.target.dataset.tag;
      addedTags.delete(tagToRemove);
      tagElement.remove();
    });
    
    // 4. 清空输入框
    tagInput.value = "";
  };


  // 监听Enter键添加标签
  tagInput.addEventListener("keydown", (e) => {
    if (e.key === "Enter") {
      e.preventDefault(); // 阻止表单提交
      addTag(tagInput.value);
    }
  });


  // 监听Tab键快速添加（选择datalist选项后按Tab）
  tagInput.addEventListener("keydown", (e) => {
    if (e.key === "Tab" && tagInput.value.trim()) {
      e.preventDefault();
      addTag(tagInput.value);
    }
  });
</script>

• 效果：用户可通过输入框联想选择预设标签（如“React”“Vue”），按Enter或Tab键添加；也可输入自定义标签（如“Next.js”），添加后标签显示在输入框左侧，点击“×”可删除，兼顾效率与灵活性。

• 
  

五、避坑指南：使用 <datalist> 的关键注意事项

5.1 浏览器兼容性与样式定制限制

<datalist>的核心功能兼容性良好，但下拉列表的样式定制存在明显限制，需提前规划：

（1）兼容性情况

完全支持：Chrome 20+、Firefox 4+、Safari 10.1+、Edge 12+（覆盖99%以上的现代浏览器用户）；

部分支持：

• Safari 9及以下：不支持label属性（仅显示value），且下拉列表样式无法修改；

• IE 10-11：支持基础联想功能，但不支持type="search"，且匹配逻辑仅支持“开头匹配”（不支持包含匹配）；

不支持：IE 9及以下（用户占比极低，可忽略或提供降级方案）。

（2）样式定制限制（核心痛点）

浏览器对<datalist>下拉列表的样式控制极其有限，无法通过CSS修改以下内容：

• 下拉列表的背景色、边框、阴影、圆角；

• 选项的字体大小、行高、hover背景色

• 下拉列表的宽度（默认与输入框一致）、最大高度。

  
  

解决方案：

轻度定制需求：接受浏览器默认样式，仅优化输入框样式（如边框、聚焦效果），保证整体视觉协调；

高度定制需求：采用“原生功能+JS增强”方案——默认使用<datalist>的联想逻辑，当需要自定义样式时，用JS监听输入事件，隐藏原生下拉列表，渲染自定义<ul>列表模拟联想效果：

5.2 避免与 <select> 混淆：明确使用场景

<datalist>与<select>都能提供选项列表，但核心定位完全不同，需根据业务需求选择：

<input 
  type="text" 
  list="no-match-list" 
  placeholder="搜索标签..." 
  id="no-match-input"
>
<datalist id="no-match-list">
  <option value="前端开发"></option>
  <option value="JavaScript"></option>
</datalist>
<!-- 无匹配提示（默认隐藏） -->
<div id="no-match-tip" style="color: #999; margin: 0.5rem 0 0 0; font-size: 0.9rem; display: none;">
  暂无匹配标签，可输入自定义标签（按Enter添加）
</div>


<script>
  const input = document.getElementById("no-match-input");
  const tip = document.getElementById("no-match-tip");
  const options = Array.from(document.getElementById("no-match-list").options).map(opt => opt.value.toLowerCase());


  // 监听输入事件，显示/隐藏提示
  input.addEventListener("input", () => {
    const inputValue = input.value.trim().toLowerCase();
    if (!inputValue) {
      tip.style.display = "none";
      return;
    }
    // 判断是否有匹配选项
    const hasMatch = options.some(opt => opt.includes(inputValue));
    tip.style.display = hasMatch ? "none" : "block";
  });
</script>