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>`
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>