HTML - Datalist: posicionarse según las primeras letras

 
Vista:
sin imagen de perfil
Val: 33
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Datalist: posicionarse según las primeras letras

Publicado por Marta (17 intervenciones) el 09/11/2021 18:48:55
Buenas, alguien sabe si es posible con un datalist que muestre los items que empiezen según los carácteres introducidos en el input?, es decir, si introduzco una G, aparecen los ítems Green y Orange, y yo quisiera que sólo apareciese Green. Es posible?

Gracias.

1
2
3
4
5
6
7
8
9
10
11
12
<input type="text" name="favorite_color" list="colors" placeholder="Enter a color">
  <datalist id="colors">
   <option value="Blue">
   <option value="Brown">
   <option value="Cyan">
   <option value="Green">
   <option value="Orange">
   <option value="Pink">
   <option value="Purple">
   <option value="Red">
   <option value="Yellow">
  </datalist>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de 7aamin
Val: 1
Ha aumentado su posición en 46 puestos en HTML (en relación al último mes)
Gráfica de HTML

Datalist: posicionarse según las primeras letras

Publicado por 7aamin (16 intervenciones) el 11/11/2021 15:48:00
Tienes que ligar el dataset con el input, a traves de la propiedad "list" en la etiqueta <input/>
1
2
3
4
5
6
7
8
9
10
11
12
<input type="text" list="colors" name="favorite_color" list="colors" placeholder="Enter a color">
  <datalist id="colors">
   <option value="Blue">
   <option value="Brown">
   <option value="Cyan">
   <option value="Green">
   <option value="Orange">
   <option value="Pink">
   <option value="Purple">
   <option value="Red">
   <option value="Yellow">
  </datalist>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 33
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Datalist: posicionarse según las primeras letras

Publicado por mblascog (17 intervenciones) el 11/11/2021 16:28:43
Gracias 7aamin por tu aporte, pero no acabo de entenderte, cuando dices ligar el dataset con el input, te refieres al datalist?
Yo creo que ya lo está, y esto hace que todo lo que escribes en el input lo busque en el datalist, esté la coincidencia al principio, al medio o al final.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de 7aamin
Val: 1
Ha aumentado su posición en 46 puestos en HTML (en relación al último mes)
Gráfica de HTML

Datalist: posicionarse según las primeras letras

Publicado por 7aamin (16 intervenciones) el 12/11/2021 01:33:09
Si, me equivoque, no es dataset, es datalist...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de 7aamin
Val: 1
Ha aumentado su posición en 46 puestos en HTML (en relación al último mes)
Gráfica de HTML

Datalist: posicionarse según las primeras letras

Publicado por 7aamin (16 intervenciones) el 12/11/2021 02:06:05
Yo lo haria con javascrip, ya que con HTML solo no se puede..
1
2
3
4
5
6
7
8
9
10
11
let string = "am";
let options = ['amarillo', 'azul', 'rojo'];
 
let optionSearcher = (string) => {
  let arr = [];
  for (let option of options) {
    if (option.startsWith(string)) arr.push(option);
  } return arr;
}
 
console.log(optionSearcher(string));
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 33
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Datalist: posicionarse según las primeras letras

Publicado por mblascog (17 intervenciones) el 12/11/2021 10:02:28
Gracias, lo hice así, pero ya puestos a hacerlo, voy cargando la lista según el contenido del input.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar