求类似jQuery autocomplete的React+shadcn多选项搜索库

核心方案：基于shadcn/ui的Autocomplete组件扩展 #

shadcn/ui本身提供了基础的Autocomplete组件，结合它的多选能力就能满足你的所有需求，无需从零开发：

• 适配React与shadcn：组件原生基于React和Radix UI构建，完全贴合shadcn的设计体系
• 搜索与数据库查询：在输入框的onInputChange事件中触发fetch请求，将输入值作为查询参数调用数据库接口，返回结果后更新组件的选项列表
• 多条目保存：开启组件的multiple模式，选中的条目会以标签形式展示，可通过onValueChange获取选中项数组，再转换为逗号分隔的字符串进行存储

简化实现代码 #

import { useState } from 'react';
import { Autocomplete } from '@/components/ui/autocomplete';

export function MultiSearchAutocomplete() {
  const [searchOptions, setSearchOptions] = useState([]);
  const [selectedItems, setSelectedItems] = useState([]);

  // 输入时触发数据库查询
  const handleSearchInput = async (inputValue) => {
    if (!inputValue.trim()) return setSearchOptions([]);
    const response = await fetch(`/api/your-search-endpoint?q=${encodeURIComponent(inputValue)}`);
    const data = await response.json();
    // 转换为组件需要的选项格式
    setSearchOptions(data.map(item => ({ label: item.title, value: item.id })));
  };

  // 将选中项转为逗号分隔字符串保存
  const handleSave = () => {
    const commaSeparatedValues = selectedItems.map(item => item.value).join(',');
    // 执行保存逻辑，比如提交到后端
    console.log('待保存的条目：', commaSeparatedValues);
  };

  return (
    <div className="space-y-3">
      <Autocomplete
        multiple
        options={searchOptions}
        value={selectedItems}
        onInputChange={handleSearchInput}
        onValueChange={setSelectedItems}
        placeholder="输入关键词搜索..."
      />
      <button onClick={handleSave} className="px-4 py-2 bg-blue-600 text-white rounded">
        保存条目
      </button>
    </div>
  );
}

补充说明 #

• 组件支持自定义样式，可结合Tailwind CSS调整标签、输入框的外观，匹配你的项目设计
• 多选模式下自带标签删除功能，用户操作逻辑和jQuery autocomplete的多条目场景一致
• 若需要分页、防抖等进阶功能，可在handleSearchInput中添加防抖逻辑，或在接口返回数据时处理分页参数

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