Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » forzar list a escoger en las opciones que aparecen al ir escribiendo

JavaScript - forzar list a escoger en las opciones que aparecen al ir escribiendo

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Eduardo
Val: 159
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

forzar list a escoger en las opciones que aparecen al ir escribiendo

Publicado por Eduardo (176 intervenciones) el 15/07/2021 23:14:21
Hola a todos esperando em puedan ayudar a este input list con opción search se le puede integrar algo para que no permita ingresar una palabra que no este en las opciones y que van apareciendo mientras se va escribiendo.

es decir forzarlo a que se elija alguna de las opciones de la lista.

para no tener que usar la librería select2


1
2
3
4
5
6
7
8
<input list="brow">
<datalist id="brow">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

mil gracias!!
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 Gio
Val: 368
Bronce
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

forzar list a escoger en las opciones que aparecen al ir escribiendo

Publicado por Gio (79 intervenciones) el 17/07/2021 11:29:42
Hola Eduardo, acabo de hacer el siguiente código:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<input list="brow">
<datalist id="brow">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
 
<script>
	//OBJETOS HTML
		var eInp=document.querySelectorAll("[list='brow']")[0]
		var eOpciones=document.getElementById("brow").getElementsByTagName("option")
 
	//VARAIBLES QUE PERMITEN EL CORRECTO FUNCIONAMIENTO DEL SCRIPT
		var l=eOpciones.length, max=0, opciones=Array(l), hay
 
	//AJUSTAMOS LOS VALORES DE LAS VARIABLES CUANDO SE TERMINA DE CARGAR EL DOCUMENTO
	window.onload=function(){
		for(let i=0; i<l; i++){
			let x = eOpciones[i].value.length
			opciones[i]=eOpciones[i].value.toLowerCase()
			if(x>max)max=x
		}
		hay=Array(max)
		for(let i=0; i<max; i++){
			hay[i]=false
		}
 
		for(i in opciones){
			opciones[i]=Array.from(opciones[i])
		}
	}
 
 
	//FUNCION EN CUESTION
		var ultimo=""
		function buscador(){
			let inp=Array.from(eInp.value.toLowerCase())
			let coincidencia=Array()
			if(inp.length){
				let si=true
				for(i in inp){
					if(si){
						si=false
						for(i2 in opciones){
							if(i==0&&inp[i]===opciones[i2][i]){
								si=true
								hay[i2]=true
							} else if(hay[i2]&&inp[i]===opciones[i2][i]){
								si=true
								hay[i2]=true
							} else {
								hay[i2]=false
							}
						}
					} else {
						break
					}
				}
				if(si){
					ultimo=eInp.value
				} else {
					eInp.value=ultimo
				}
			} else {
				ultimo=""
			}
		}
 
	//DETECCION DE ENEVTOS
	eInp.addEventListener("keyup",  buscador)
	eInp.addEventListener("change", buscador)
</script>

El mismo código, pero comentado:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<input list="brow">
<datalist id="brow">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
 
<script>
	//OBJETOS HTML
		var eInp=document.querySelectorAll("[list='brow']")[0]
		var eOpciones=document.getElementById("brow").getElementsByTagName("option")
 
	//VARAIBLES QUE PERMITEN EL CORRECTO FUNCIONAMIENTO DEL SCRIPT
		var l=eOpciones.length, max=0, opciones=Array(l), hay
 
	//AJUSTAMOS LOS VALORES DE LAS VARIABLES CUANDO SE TERMINA DE CARGAR EL DOCUMENTO
	window.onload=function(){
		for(let i=0; i<l; i++){
			let x = eOpciones[i].value.length
			opciones[i]=eOpciones[i].value.toLowerCase()
			if(x>max)max=x
		}
		hay=Array(max)
		for(let i=0; i<max; i++){
			hay[i]=false
		}
 
		for(i in opciones){
			opciones[i]=Array.from(opciones[i])
		}
	}
 
 
	//FUNCION EN CUESTION
		var ultimo=""
		function buscador(){
			let inp=Array.from(eInp.value.toLowerCase())
			let coincidencia=Array()
 
			//SI HAY AL MENOS UN DIGITO DENTRO DEL IMPUT
			if(inp.length){
				let si=true
 
				//CHEQUEAMOS LETRA POR LETRA (ETAPA DE BUZQUEDA)
				for(i in inp){
 
					//SI SE ENCONTRÓ AL MENOS UNA COINCIDENCIA, CONTINUAMOS
					if(si){
						si=false
 
						//BUSCANDO EN opciones PARA VER CON QUE OPCIONES HAY COINCIDENCIAS
						for(i2 in opciones){
							//CUANDO SE TRATA DEL PRIMER DIGITO
							if(i==0&&inp[i]===opciones[i2][i]){
								si=true
								hay[i2]=true
							}
							//CUANDO SE TRATA DE LOS DEMAS DIGITOS
							else if(hay[i2]&&inp[i]===opciones[i2][i]){
								si=true
								hay[i2]=true
							}
							//NO SE ENCONTRÓ COINCIDENCIA CON ESTA LETRA (inp[i]) EN ESTA OPCION (opciones[i2]) por lo que queda descartada para futuras posibilidades
							else {
								hay[i2]=false
							}
						}
					}
 
					//SI NO SE ENCONTRÓ COINCIDENCIA EN NINGUNA OPCION, CANCELAMOS BUSQUEDA ¿PARA QUE SEGUIR?
					else {
						break
					}
				}
 
				//SI EN LA ETAPA DE BUSQUEDA, SE ENCONTRÓ ALMENOS UNA COINCIDENCIA, GUARDAMOS LO QUE INTRODUJO EL USUARIO POR SI EL SIGUIENTE VALOR INTRODUCIDO NO FIGURA EN LAS OPCIONES, RECUPERAREMOS ESTE QUE SI COINCIDE
				if(si){
					ultimo=eInp.value
				}
 
				//NO SE ENCONTRÓ LO INTRODUCIDO, POR LO QUE RECUPERAREMOS EL ANTERIOR QUE SI SE ENCONTRÓ
				else {
					eInp.value=ultimo
				}
			}
 
			//SI ESTÁ VACIO EL INPUT
			else {
				ultimo=""
			}
		}
 
	//DETECCION DE ENEVTOS
	eInp.addEventListener("keyup",  buscador)
	eInp.addEventListener("change", buscador)
</script>


Básicamente, este script evita que el usuario intente ingresar texto que no figure en las opciones de la datalist, pero si le permite ir ingresando texto que corresponda a una o mas opciones.

Ponlo a prueba y dime si es lo que estabas buscando. Saludos!
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 Gio
Val: 368
Bronce
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

forzar list a escoger en las opciones que aparecen al ir escribiendo

Publicado por Gio (79 intervenciones) el 17/07/2021 16:19:05
Le hice una actualización al código para que pueda funcionar con todos los inputs y datalist que necesites.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
Escriba o elija algun <b>navegador</b> que figure en las siguientes opciones:
<input list="navegadores">
<datalist id="navegadores">
	<option value="Internet Explorer">
	<option value="Firefox">
	<option value="Chrome">
	<option value="Opera">
	<option value="Safari">
</datalist>
 
<br><br>
Escriba o elija alguna <b>fruta</b> que figure en las siguientes opciones:
<input list="frutas">
<datalist id="frutas">
	<option value="Albaricoque">
	<option value="Almendra">
	<option value="Ciruela">
	<option value="Frambuesa">
	<option value="Fresa">
	<option value="Mandarina">
	<option value="Manzana">
</datalist>
 
<script>
	//FUNCION QUE GENERA UN OBJETO DE CONFIGURACION PARA LA FUNCION forzarDatalist()
	function configDatalist(datalistID){
		const _inp=document.querySelectorAll("[list='"+datalistID+"']")[0]
		datalistID=document.getElementById(datalistID).getElementsByTagName("option")
		if(datalistID){
			let l=datalistID.length, max=0, _opciones=Array(l), _hay
			for(let i=0; i<l; i++){
				let x = datalistID[i].value.length
				_opciones[i]=datalistID[i].value.toLowerCase()
				if(x>max)max=x
			}
			_hay=Array(max)
			for(let i=0; i<max; i++){
				_hay[i]=false
			}
 
			for(i in _opciones){
				_opciones[i]=Array.from(_opciones[i])
			}
 
			return {opciones:_opciones, hay:_hay, inp:_inp, ultimo:"", eventos:true}
		} else return false
	}
 
 
 
	//FUNCION EN CUESTION, REQUIERE EN SU PARÁMETRO UN OBJETO DE CONFIGURACION GENERADO POR LA FUNCION configDatalist
	function forzarDatalist(Config){
		let inp=Array.from(Config.inp.value.toLowerCase())
		let coincidencia=Array()
		if(inp.length){
			let si=true
			for(i in inp){
				if(si){
					si=false
					for(i2 in Config.opciones){
						if(i==0&&inp[i]===Config.opciones[i2][i]){
							si=true
							Config.hay[i2]=true
						} else if(Config.hay[i2]&&inp[i]===Config.opciones[i2][i]){
							si=true
							Config.hay[i2]=true
						} else {
							Config.hay[i2]=false
						}
					}
				} else {
					break
				}
			}
			if(si){
				Config.ultimo=Config.inp.value
			} else {
				Config.inp.value=Config.ultimo
			}
		} else {
			Config.ultimo=""
		}
		if(Config.eventos){
			Config.inp.addEventListener("keyup",  ()=>{forzarDatalist(Config)})
			Config.inp.addEventListener("change", ()=>{forzarDatalist(Config)})
			Config.eventos=false
		}
	}
 
 
	//PUESTO EN PRÁCTICA
	var ConfiguracionNavegadores, ConfiguracionFrutas
	window.onload=function(){
		//NAVEGADORES
		ConfiguracionNavegadores = configDatalist("navegadores")
		forzarDatalist(ConfiguracionNavegadores)
 
		//FRUTAS
		ConfiguracionFrutas = configDatalist("frutas")
		forzarDatalist(ConfiguracionFrutas)
	}
</script>
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