Adding autocomplete to a React-Bootstrap Select tag

Question

I want to build a react select component that searches a dynamic list populated from a server api with a JSON object. I am trying to find a React-select alternative since it dosen't work with the current structure of my project.

The basic <Form.select> can highlight a list element using the first character only, i am trying to change it's behavior so that it can highlight an element using multiple charachters.

How can i add a search in React-Bootstrap form??

<Form.Select aria-label="Default select example">
  <option>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</Form.Select>`

Answer 1

this is my created simple example to solve conversion of code to the dynamic list, then filter according to search string str,

const [options, setOptions] = useState(["one", "two", "three"]);
const [data, setData] = useState([]);
const [str, setStr] = useState("");

handleInputChange = (event) => {
    
    setStr(event.target.value);
    fetch('URL').then(res=>setData(res.json().filter(str))
})

<input type="text" id="filter" placeholder="Search for..." onChange={this.handleInputChange}/>
<Form.Select aria-label="Default select example">
    { options.map((element, index) => <option key={index}>{element}</option>) }
</Form.Select>