Have you used dropdown with an input field ? In this tutorial we are going to see how to create html dropdown with input field to search existing option value. In HTML5 it is easy to create this, but in old html it is difficult and created using jquery. HTML5 introduces new features or new form elements which is datalist and we should use now to create html dropdown with an input field. So let us see how to use datalist tag.
<div class="form-group"> <input list="jobroles" name="role" /> <datalist id="jobroles"> <option value="PHP"> <option value=".NET"> <option value="PYTHON"> <option value="C"> <option value="ABAP"> </datalist> </div>
It is used to create autocomplete features in form. Datalist is preferred to use in form to make it user friendly so that user can input the option faster. This element have features to set predefined option for the users to select data. Datalist tag is used in the form to save user time and reduce the possibility of error in submitted records because it have predefined options for user to select.
Above given script will create a dropdown with input field for you.If you have any queries regarding this article feel free to comment .Thanks.