如何将API返回数据动态添加到下拉框并支持多选功能？

通用实现逻辑 #

• 输入事件加防抖处理，避免用户连续输入时频繁触发API请求，通常设置300~500ms延迟即可
• 输入触发后调用接口，校验返回的前缀匹配数据合法性，过滤无效值
• 动态渲染下拉选项列表，每个选项携带独立的选中状态标识
• 绑定选项点击事件，选中值存入已选集合自动去重，同步更新文本框/已选标签区域的显示
• 绑定页面全局点击事件，点击非组件区域时自动收起下拉列表

原生JavaScript实现示例 #

HTML结构 #

<div class="multi-search-select">
  <!-- 搜索输入框 -->
  <input type="text" id="searchInput" placeholder="输入关键词搜索">
  <!-- 已选标签展示区 -->
  <div id="selectedTags" class="tag-container"></div>
  <!-- 下拉选项容器 -->
  <ul id="optionList" class="option-list hidden"></ul>
</div>

核心JS逻辑 #

// 防抖工具函数
function debounce(fn, delay = 300) {
  let timer = null
  return function(...args) {
    clearTimeout(timer)
    timer = setTimeout(() => fn.apply(this, args), delay)
  }
}

// 全局变量初始化
const selectedValues = new Set() // 用Set存储已选值自动去重
const searchInput = document.getElementById('searchInput')
const optionList = document.getElementById('optionList')
const selectedTags = document.getElementById('selectedTags')

// 绑定带防抖的搜索输入事件
searchInput.addEventListener('input', debounce(async (e) => {
  const keyword = e.target.value.trim()
  if (!keyword) {
    optionList.classList.add('hidden')
    return
  }
  // 替换为你的实际API请求逻辑
  const res = await fetch(`/your/api/address?keyword=${encodeURIComponent(keyword)}`)
  const optionData = await res.json()
  
  // 渲染下拉选项，同步显示已选状态
  optionList.innerHTML = optionData.map(item => `
    <li class="option-item" data-value="${item.value}" data-label="${item.label}">
      <input type="checkbox" ${selectedValues.has(item.value) ? 'checked' : ''}>
      <span>${item.label}</span>
    </li>
  `).join('')
  optionList.classList.remove('hidden')
}))

// 选项选中逻辑
optionList.addEventListener('click', (e) => {
  const targetItem = e.target.closest('.option-item')
  if (!targetItem) return
  const value = targetItem.dataset.value
  const label = targetItem.dataset.label
  const checkbox = targetItem.querySelector('input[type="checkbox"]')
  
  checkbox.checked ? selectedValues.add(value) : selectedValues.delete(value)
  // 更新已选标签显示
  renderSelectedTags()
})

// 点击外部区域收起下拉
document.addEventListener('click', (e) => {
  if (!e.target.closest('.multi-search-select')) {
    optionList.classList.add('hidden')
  }
})

// 渲染已选标签
function renderSelectedTags() {
  // 可根据业务需求自定义标签样式、删除逻辑
  selectedTags.innerHTML = Array.from(selectedValues).map(val => `
    <span class="tag">${val} <span class="tag-close">×</span></span>
  `).join('')
}

组件库快速实现（以Vue3+Element Plus为例） #

主流UI组件库的Select组件都已封装好多选、远程搜索能力，直接配置参数即可，无需重复造轮子：

<template>
  <el-select
    v-model="selectedList"
    multiple
    filterable
    remote
    reserve-keyword
    placeholder="输入关键词搜索"
    :remote-method="remoteSearch"
    :loading="loading"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script setup>
import { ref } from 'vue'
const selectedList = ref([])
const options = ref([])
const loading = ref(false)

// 远程搜索方法，加防抖处理
const remoteSearch = debounce(async (keyword) => {
  if (!keyword) {
    options.value = []
    return
  }
  loading.value = true
  // 替换为实际API请求
  const res = await fetch(`/your/api/address?keyword=${encodeURIComponent(keyword)}`)
  options.value = await res.json()
  loading.value = false
}, 300)
</script>

React项目可以用Ant Design的Select组件，配置mode="multiple"、showSearch和filterOption参数即可实现相同效果。

注意事项 #

• 接口请求要加并发控制：新请求发出时如果上一个请求还在pending，建议取消上一个请求，避免旧接口返回结果覆盖新搜索结果
• 可增加键盘上下键选择、回车选中的逻辑，适配无障碍操作需求
• 已选值过多时可配置折叠显示逻辑，避免输入框区域被撑变形

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