html5 - elemento - php datalist
selecciones múltiples con datalist (3)
Estoy usando la etiqueta para crear una lista de sugerencias para mi cuadro de búsqueda, pero no puedo seleccionar varios valores del datalist. Actualmente, mi HTML es:
<html>
<form action="search_tags.php" method="GET"/>
Search: <input type="text" multiple="multiple" name="search" list="tags" autocomplete="off" />
<datalist id="tags">
<option value="black">
<option value="gold">
<option value="grey">
<option value="pink">
<option value="turquoise">
<option value="red">
<option value="white">
</datalist>
</html>
Ofrecerá sugerencias para un artículo, pero después de eso, las sugerencias no sugerirán un autocompletado para mi segunda opción. Pensé que la etiqueta ''múltiple'' era todo lo que necesitaba (y lo que se sugiere en línea) pero no parece tener el efecto deseado.
¿Alguna sugerencia?
Datalist personalizado para aceptar múltiples valores:
https://jsfiddle.net/bhbwg0rg/1/
Después de cada entrada , presione (Coma) y luego la barra espaciadora
<label for="authors">Type authors from favorite to least favorite</label>
<input type="text" list="names-list" id="authors" value="" size="50" name="authors" placeholder="Type author names">
<small>You can type how many you want.</small>
<datalist id="names-list">
<option value="Albert Camus">
<option value="Alexandre Dumas">
<option value="C. S. Lewis">
<option value="Charles Dickens">
<option value="Dante Alighieri">
</datalist>
Varios trabajan actualmente solo con el tipo de entrada = "correo electrónico" y solo en Chrome y Opera
Mira este ejemplo minimalista:
<input type="email" list="emails" multiple>
<datalist id="emails">
<option value="[email protected]">
<option value="[email protected]">
<option value="[email protected]">
<option value="[email protected]">
</datalist>
<input type="text" list="texts" multiple>
<datalist id="texts">
<option value="black">
<option value="gold">
<option value="grey">
<option value="pink">
<option value="turquoise">
<option value="red">
<option value="white">
</datalist>
( http://jsfiddle.net/iiic/t66boyea/1/ )
La primera entrada estará funcionando, la segunda NO. Solo presiona la coma, y la lista aparecerá igual que en el clic en la entrada.
De acuerdo con este atributo ''múltiple'' solo es válido con los tipos de entrada de correo electrónico y archivo .