Add search to Select React Bootstrap React JS

Viewed 1102

i'm working with react-bootstrap to create a select list, by default there is a search in list but by just the first caracter. there is a way to add search in my select like the select from react-select. any help please ?

facture.js

import Select from '../retour/bloc/select';
        export default function Facture() {  
          return (    
        <Select
                label="Bordereaux"
                name="Bordereaux"
                changed={selectPick}
                options={listBordereaux ? listBordereaux : []}
                onClick={toggleOpen}
                search
              />)}

Select.js

import React, { Component } from 'react';
    import { Form, Row, Col } from 'react-bootstrap';
    import PropTypes from 'prop-types';
    import '../retour.css'
    export default class Select extends Component {
        render() {
            let { label, name, value, changed, options } = this.props;
            return (
                <Form.Group as={Row}>
                    <Form.Label column lg={4} sm={10} className=""> {label} : </Form.Label>
                    <Col lg={6} sm={10}>
                        <Form.Control
                            name={name}
                            // size="sm"
                            as="select"
                            className="retour-select"
                            value={value}
                            onChange={(event) => changed(event, name)}
                        >
                            <option value="" hidden>  {label}  </option>
                            {label === "Bordereaux" ?
                                options.map(el =>
                                    <option key={el.id} value={el.ref}>
                            }
                        </Form.Control>
                    </Col>
                </Form.Group>
            );
        }
    }
    Select.propTypes = {
        label: PropTypes.string,
    };
0 Answers
Related