Reactjs：给选择元素（组合框）提供文本输入

Question

I am trying to implement a react js select element. I am giving a set of options to that element such that the user can select. In addition to that I need to add a place holder to that element and make it able to type values and enter as in a text box. Then the users can either enter custom values to it or select an element from the drop down.

Below is the code snippet I used for implementing the select element. But it only allows selecting. Can anyone help me to implement a select element which allows inputting text and place holder.

<select className="form-control form-control-sm" ref="LayerL6Select" name="LayerL6Select"  id="LayerL6Select">
<option value="1">Apple</option>    
<option value="2">Mango</option>
</select>

Answer 1

If you looking for short time solution. I would suggest following react-select library which helps you to achieve what you want.

https://react-select.com/home

else if you ask this for your personal learning here its source code, you could learn from it source code.

https://github.com/JedWatson/react-select

Answer 2

You should use <input> followed by <datalist> .Here is example in html you can convert in into react. Note that id attribute of <datalist> should be added list attribute of the <input>

According to DOCS

The datalist element is hooked up to an input element using the list attribute on the input element

 <input placeholder="myplaceholder" list="opts"/> <datalist id="opts"> <option>One</option> <option>Two</option> <option>Three</option> </datalist>