如何为React-Bootstrap Select标签添加自动补全搜索功能

实现思路 #

原生Form.Select不支持自定义搜索逻辑，我们可以用React-Bootstrap内置的Form.Control + Dropdown组件组合模拟带搜索的选择器，完全适配现有项目的React-Bootstrap样式体系，无需引入第三方选择器库。

核心实现代码 #

import { useState, useMemo, useEffect } from 'react';
import { Form, Dropdown } from 'react-bootstrap';

// 高亮匹配文本的工具函数
const highlightMatch = (text, keyword) => {
  if (!keyword) return text;
  const regex = new RegExp(`(${keyword})`, 'gi');
  const parts = text.split(regex);
  return parts.map((part, i) => 
    part.toLowerCase() === keyword.toLowerCase() ? 
      <span key={i} style={{ backgroundColor: '#ffeb3b', fontWeight: 'bold' }}>{part}</span> : part
  );
};

const SearchableSelect = ({ options = [], apiUrl, placeholder = "请选择", onSelect }) => {
  const [searchKey, setSearchKey] = useState('');
  const [showDropdown, setShowDropdown] = useState(false);
  const [selectedValue, setSelectedValue] = useState('');
  const [selectedLabel, setSelectedLabel] = useState('');
  const [remoteOptions, setRemoteOptions] = useState([]);

  // 本地过滤逻辑，如果是服务端请求则走下方的useEffect
  const filteredOptions = useMemo(() => {
    // 服务端模式用接口返回的remoteOptions，否则用传入的静态options
    const targetOptions = apiUrl ? remoteOptions : options;
    if (!searchKey) return targetOptions;
    return targetOptions.filter(opt => 
      opt.label.toLowerCase().includes(searchKey.toLowerCase())
    );
  }, [searchKey, options, remoteOptions, apiUrl]);

  // 服务端搜索逻辑，不需要可以删除
  useEffect(() => {
    if (!apiUrl || !searchKey) return;
    // 内置300ms防抖，避免输入过程频繁发起请求
    const timer = setTimeout(async () => {
      const res = await fetch(`${apiUrl}?keyword=${encodeURIComponent(searchKey)}`);
      const data = await res.json();
      // 假设接口返回格式为 [{value: '1', label: 'One'}, ...]，可根据实际接口调整
      setRemoteOptions(data);
    }, 300);
    return () => clearTimeout(timer);
  }, [searchKey, apiUrl]);

  const handleSelect = (value, label) => {
    setSelectedValue(value);
    setSelectedLabel(label);
    setSearchKey('');
    setShowDropdown(false);
    onSelect?.(value);
  };

  return (
    <Dropdown show={showDropdown} onToggle={setShowDropdown}>
      <Dropdown.Toggle as="div" className="p-0">
        <Form.Control
          type="text"
          placeholder={selectedLabel || placeholder}
          onClick={() => setShowDropdown(true)}
          onChange={(e) => {
            setSearchKey(e.target.value);
            setShowDropdown(true);
          }}
          style={{ cursor: 'pointer' }}
        />
      </Dropdown.Toggle>
      <Dropdown.Menu style={{ width: '100%' }}>
        {filteredOptions.length > 0 ? (
          filteredOptions.map(opt => (
            <Dropdown.Item
              key={opt.value}
              onClick={() => handleSelect(opt.value, opt.label)}
              active={opt.value === selectedValue}
            >
              {highlightMatch(opt.label, searchKey)}
            </Dropdown.Item>
          ))
        ) : (
          <Dropdown.Item disabled>无匹配选项</Dropdown.Item>
        )}
      </Dropdown.Menu>
    </Dropdown>
  );
};

// 组件使用示例
export default function App() {
  // 本地静态选项示例，对应你原有代码的配置
  const localOptions = [
    { value: '', label: 'Open this select menu' },
    { value: '1', label: 'One' },
    { value: '2', label: 'Two' },
    { value: '3', label: 'Three' },
  ];

  // 服务端模式直接传入apiUrl参数即可：<SearchableSelect apiUrl="/api/your-options" />
  return (
    <div style={{ width: 300, margin: '20px' }}>
      <SearchableSelect 
        options={localOptions}
        placeholder="Open this select menu"
        onSelect={(val) => console.log('选中值：', val)}
      />
    </div>
  );
}

特性说明 #

• 支持任意位置多字符模糊匹配，不限制仅匹配首字符
• 自动高亮选项中匹配到的文本片段
• 同时支持本地静态选项和服务端动态搜索两种模式
• 完全复用React-Bootstrap原生组件样式，和现有项目UI体系完全兼容，无样式冲突
• 交互逻辑和原生Select一致，用户学习成本低

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