react-bootstrap-typeahead

import React, { useState } from 'react'; import { Typeahead } from 'react-bootstrap-typeahead'; import 'react-bootstrap-typeahead/css/Typeahead.css'; import 'react-bootstrap-typeahead/css/Typeahead.bs5.css'; // For Bootstrap 5 interface Option { id: number; label: string; } const options: Option[] = [ { id: 1, label: 'Apple' }, { id: 2, label: 'Banana' }, { id: 3, label: 'Orange' }, { id: 4, label: 'Pineapple' }, { id: 5, label: 'Strawberry' }, ]; function MyTypeaheadComponent() { const [selected, setSelected] = useState<Option[]>([]); return ( <div className="container mt-5"> <h3>Basic Typeahead Example</h3> <Typeahead id="my-typeahead" options={options} labelKey="label" placeholder="Choose a fruit..." onChange={(selectedOptions) => { setSelected(selectedOptions as Option[]); console.log('Selected:', selectedOptions); }} selected={selected} clearButton highlightOnlyResult renderMenuItemChildren={(option, props) => ( <div key={option.id}> <span>{option.label}</span> </div> )} /> {selected.length > 0 && ( <div className="mt-3"> Selected items: {selected.map(item => item.label).join(', ')} </div> )} </div> ); } export default MyTypeaheadComponent;