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>
If you looking for short time solution. I would suggest following react-select library which helps you to achieve what you want.
else if you ask this for your personal learning here its source code, you could learn from it source code.
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 aninput
element using thelist
attribute on the input element
<input placeholder="myplaceholder" list="opts"/> <datalist id="opts"> <option>One</option> <option>Two</option> <option>Three</option> </datalist>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.