html – Difference between input list and select

Question:

Hi, what is the difference between using an input list or select ?

Here is an example.

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

<select name="Seleccion">
   <option value="Rojo">rojo</option>
   <option value="Verde">verde</option>
</select>

Answer:

Some differences:

• With a list / datalist you can manually enter values ​​that do not exactly match the values ​​suggested in the datalist , while with a select you have to choose from the option values.
• select is supported by all browsers, while the support for list / datalist although extended, is not yet there at all and can cause problems (especially on mobile devices) … And curiously the way to solve it is to have a select inside the datalist .
• You can have multiple input list pointing to the same datalist without affecting the page (creating one is basically automatic), while a select you must insert all the option to have values, which can negatively affect performance.

And here are some differences that will depend on the browser you use:

• In Chrome / Firefox, with a list / datalist you can search for elements anywhere in the string, while with select you have to search starting with the first character of the string (for example, in the list you can write a "c" and it will automatically suggest "Google Chrome", while in the select to select Chrome you would have to start with a "g" because it is "Google Chrome"). In IE the behavior is the same between input / datalist and select .
• If there are many values, when displaying a select it will show all the values ​​( datalist with a scroll), while with a list / datalist it will only show some or none (eg Chrome will show a select list while Firefox will not show anything until do not start writing).

——-

The main difference is that they are not the same: one is a text field with autocomplete / suggestions and the other is a list of fixed values. Some browsers will represent them in a very similar way, but that similarity will depend on the browser used (eg IE and Chrome show input list similar to a select but Firefox represents it as a normal text field until you start typing) .