HTML5, use input on a select to type one of the option

Posted on

Question :

Is everything good? Next, I have a select inside an html, see:

		<option selected="selected" value>...</option>
		<option>opção 1</option>
		<option>opção 2</option>

I tried to use an input to type, rather than selecting the option by clicking.
But the input is set aside, as if it were not part of select

My doubt is; is it really possible to do this, type to select the options instead of selecting by clicking?

Thank you in advance.


Answer :

I do not know if it will suit you exactly, but sometimes <datalist> caters to you.

Link to the tag: link

The difference between a <select> and a <datalist> is that in select you determine the options that the user is “required” to choose between them. While datalist vc offers some suggestions for the user, but it is free to type what you want, that is, it is a pre-defined list , not a pre- / em> as the select .


The <datalist> element represents the list that represents predefined
  options for other controls.

Translating: The <datalist> element represents the list that represents default options for other controls.

Official source W3C: link

Tip: Although not the focus of this question here is another question that was made here in Stackoverflow and has more information about these two tags: What is the < / datalist >? tag

See the example of datalist working.

<input list="browsers" />
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">


Leave a Reply

Your email address will not be published. Required fields are marked *