如何在React Bootstrap的Select组件中实现类似react-select的搜索功能

你当前使用的Form.Control配合原生select标签的实现，受限于原生select的默认行为，仅支持首字符匹配搜索。要实现类似react-select的全字符模糊搜索，需要自定义下拉交互逻辑，具体实现如下： #

核心修改思路 #

• 放弃原生select标签，使用react-bootstrap的Dropdown组件自定义下拉交互
• 组件内部维护搜索关键词状态，基于关键词对选项做全字符模糊匹配过滤
• 兼容你原有props的调用逻辑，无需修改Facture.js的传参

修改后的完整代码 #

Select.js #

import React, { Component } from 'react';
import { Form, Row, Col, Dropdown, FormControl } from 'react-bootstrap';
import PropTypes from 'prop-types';
import '../retour.css'

export default class Select extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // 搜索关键词
      searchKey: '',
      // 下拉展开状态
      isOpen: false,
      // 当前选中值
      selectedValue: props.value || ''
    };
  }

  // 处理搜索关键词变化
  handleSearchChange = (e) => {
    this.setState({ searchKey: e.target.value });
  };

  // 处理选项选中
  handleSelect = (value) => {
    this.setState({
      selectedValue: value,
      isOpen: false,
      searchKey: ''
    });
    // 兼容原有changed回调逻辑
    const mockEvent = { target: { name: this.props.name, value } };
    this.props.changed(mockEvent, this.props.name);
  };

  // 过滤选项：全字符匹配，不区分大小写
  getFilteredOptions = () => {
    const { options } = this.props;
    const { searchKey } = this.state;
    if (!searchKey.trim()) return options;
    const lowerKey = searchKey.toLowerCase();
    // 你可以根据实际需要修改匹配的字段，这里示例匹配ref字段
    return options.filter(item => item.ref.toLowerCase().includes(lowerKey));
  };

  render() {
    let { label, name, search } = this.props;
    const { isOpen, selectedValue } = this.state;
    const filteredOptions = this.getFilteredOptions();

    return (
      <Form.Group as={Row}>
        <Form.Label column lg={4} sm={10} className=""> {label} : </Form.Label>
        <Col lg={6} sm={10}>
          <Dropdown
            show={isOpen}
            onToggle={(open) => this.setState({ isOpen: open })}
            className="w-100"
          >
            <Dropdown.Toggle variant="light" className="w-100 text-start retour-select">
              {selectedValue || label}
            </Dropdown.Toggle>
            <Dropdown.Menu className="w-100">
              {/* 开启search属性时显示搜索框 */}
              {search && (
                <Dropdown.Item as="button" disabled className="py-1">
                  <FormControl
                    placeholder="输入关键词搜索"
                    onChange={this.handleSearchChange}
                    onClick={(e) => e.stopPropagation()}
                    autoFocus
                  />
                </Dropdown.Item>
              )}
              <Dropdown.Divider />
              {filteredOptions.length > 0 ? (
                filteredOptions.map(el => (
                  <Dropdown.Item
                    key={el.id}
                    onClick={() => this.handleSelect(el.ref)}
                    active={el.ref === selectedValue}
                  >
                    {el.ref}
                  </Dropdown.Item>
                ))
              ) : (
                <Dropdown.Item disabled>无匹配选项</Dropdown.Item>
              )}
            </Dropdown.Menu>
          </Dropdown>
        </Col>
      </Form.Group>
    );
  }
}

Select.propTypes = {
  label: PropTypes.string,
  name: PropTypes.string.isRequired,
  changed: PropTypes.func.isRequired,
  options: PropTypes.arrayOf(PropTypes.object),
  search: PropTypes.bool,
  value: PropTypes.string
};

Select.defaultProps = {
  search: false,
  options: []
};

可选优化点 #

• 如果需要支持多字段匹配，可以修改getFilteredOptions中的过滤逻辑，同时匹配item的多个属性
• 可以自定义高亮匹配到的关键词，提升搜索体验
• 如果原有样式依赖原生select，可以调整Dropdown的样式和原有retour-select类的样式保持一致

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