Hi, what is the difference between using an
input list or
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>
- With a
datalistyou can manually enter values that do not exactly match the values suggested in the
datalist, while with a
selectyou have to choose from the
selectis supported by all browsers, while the support for
datalistalthough 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
- You can have multiple
input listpointing to the same
datalistwithout affecting the page (creating one is basically automatic), while a
selectyou must insert all the
optionto 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
datalistyou can search for elements anywhere in the string, while with
selectyou have to search starting with the first character of the string (for example, in the
listyou can write a "c" and it will automatically suggest "Google Chrome", while in the
selectto select Chrome you would have to start with a "g" because it is "Google Chrome"). In IE the behavior is the same between
- If there are many values, when displaying a
selectit will show all the values (
datalistwith a scroll), while with a
datalistit 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) .