Código de JavaScript - Ocultar/Mostrar div según texto de búsqueda

Imágen de perfil
Val: 2.019
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Ocultar/Mostrar div según texto de búsquedagráfica de visualizaciones


JavaScript

Publicado el 31 de Marzo del 2018 por Xavi (534 códigos)
2.097 visualizaciones desde el 31 de Marzo del 2018
Este simple código, muestra como esconder o mostrar los divs que contienen parte de la cadena de búsqueda.
La búsqueda se hace en el dataset.buscar, ya que el contenido del div podría contener imágenes, código html, etc...

buscar-en-div

buscar-en-div-resultado

Versión 1
estrellaestrellaestrellaestrellaestrella(2)

Publicado el 31 de Marzo del 2018gráfica de visualizaciones de la versión: Versión 1
2.099 visualizaciones desde el 31 de Marzo del 2018
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
 
	<style>
	body,input {font-family:Arial;font-size:14px;}
	input {padding:5px;}
	#list>div {padding:3px;}
	.hide {display:none;}
	</style>
</head>
 
<body>
	<div>
		<input type="text" value="" id="buscar" placeholder="buscar un pais">
	</div>
 
	<div id="list"></div>
</body>
</html>
 
<script>
arrayValores=['Afghanistan', 'Albania', 'Argelia', 'Alemania', 'American Samoa', 'Andorra', 'Angola', 'Anguilla', 'Antartida', 'Antigua y Barbuda', 'Argentina', 'Armenia', 'Aruba', 'Australia', 'Austria', 'Azerbaijan', 'Bahamas', 'Bahrain', 'Bangladesh', 'Barbados', 'Belarus', 'Belgium', 'Belize', 'Benin', 'Bermuda', 'Bhutan', 'Bolivia', 'Bosnia-Herzegovina', 'Botswana', 'Bouvet Island', 'Brasil', 'Brit Ind Ocean Territory', 'Brunei Darussalm', 'Bulgaria', 'Burkina Faso', 'Burma', 'Burundi', 'Cambodia', 'Cameroon', 'Canada', 'Canary Islands', 'Cape Verde', 'Caymen Islands', 'Central African Rep', 'Chad', 'Chile', 'China', 'Christmas Islands', 'Cocos Islands', 'Colombia', 'Comoros', 'Congo', 'Cook Islands', 'Costa Rica', 'Croatia', 'Cuba', 'Chipre', 'Dem Rep. of Korea', 'Dinamarca', 'Djibouti', 'Dominica', 'East Timor', 'Ecuador', 'Egipto', 'El Salvador', 'Eritrea', 'España', 'Estados Unidos de America', 'Estonia', 'Etiopia', 'Falkland Islands', 'Faroe Islands', 'Fiji', 'Finland', 'Francia', 'Guiana Francesa', 'Polynesia Francesa', 'French So. Territories', 'Gabon', 'Gambia', 'Georgia', 'Ghana', 'Gibraltar', 'Guinea Equatorial', 'Grecia', 'Greenland', 'Grenada', 'Guadalupe', 'Guatemala', 'Guinea', 'Guinea Bissau', 'Guyana', 'Haiti', 'Heard, McDonald Island', 'Honduras', 'Hong Kong', 'Hungary', 'Iceland', 'India', 'Indonesia', 'Inglaterra', 'Iran', 'Iraq', 'Ireland', 'Islas Filipinas', 'Israel', 'Italia', 'Ivory Coast', 'Jamaica', 'Japon', 'Jordan', 'Kazakhistan', 'Kenia', 'Kiribati', 'Korea del Norte', 'Kuwait', 'Kyrqyzstan', 'Laos', 'Lativa', 'Libano', 'Lesotho', 'Liberia', 'Libya', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Macau', 'Madagascar', 'Malawi', 'Malaysia', 'Maldivas', 'Mali', 'Malta', 'Mariana Islands', 'Marruecos', 'Marshall Islands', 'Martinique', 'Mauritania', 'Mauritius', 'Mayotte', 'Mexico', 'Micronesia', 'Moldova', 'Monaco', 'Mongolia', 'Montserrat', 'Mozambique', 'Myanmar', 'Nambia', 'Nauru', 'Nepal', 'Netherland Antilles', 'Netherlands', 'New Caledonia', 'New Zealand', 'Nicaragua', 'Niger', 'Nigeria', 'Niue Island', 'Norfolk Island', 'Northern Mariana Island', 'Norway', 'OCE', 'Oman', 'Pacific Islands', 'Pakistan', 'Palau', 'Panama', 'Papua New Guinea', 'Paraguay', 'Peru', 'Pitcairn', 'Poland', 'Portugal', 'Puerto Rico', 'Qatar', 'Reino Unido', 'Republica de Corea', 'Republica Dominicana', 'Reunion', 'Romania', 'Russian Federation', 'Rwanda', 'S Georgia Sandwich', 'Saint Pierre Miguelon', 'Samoa', 'San Marino', 'Sao Tomee and Principe', 'Saudi Arabia', 'Senegal', 'Seychelles', 'Sierre Leone', 'Singapore', 'Slovakia', 'Slovenia', 'Solomon Islands', 'Somali Republic', 'South Africa', 'South Korea', 'Sri Lanka', 'St. Helena', 'St. Kits-Nevis', 'St. Lucia', 'St. Vincent/Grenadines', 'Sudan', 'Suriname', 'Svalbard Jan Mayen', 'Swaziland', 'Sweden', 'Switzerland', 'Syria', 'Taiwan', 'Tajikistan', 'Tanzania', 'Thailand', 'Togo', 'Tokeelau', 'Tonga', 'Trinidad Tobago', 'Tunisia', 'Turquia', 'Turkmenistan', 'Turks Caicos Islands', 'Tuvalu', 'Uganda', 'Ukrania', 'United Arab Emirates', 'Uruguay', 'US Minor Outlying Is.', 'Uzbekistan', 'Vanuatu', 'Vatican City State', 'Venezuela', 'Vietnam', 'Virgin Islands: British', 'Virgin Islands: US', 'Wallis Futuna Islands', 'Western Sahara', 'Western Samoa', 'Yemen', 'Yugoslavia', 'Zaire', 'Zambia', 'Zimbabwe'];
 
var lista=document.getElementById("list");
 
// añadimos los paises a la lista
arrayValores.sort().forEach(function(k) {
 
	// creamos un elemento div
	var div=document.createElement("div");
 
	// añadimos el texto al nuevo elemento div creado
	var contenido=document.createTextNode(" - "+k);
	div.appendChild(contenido);
 
	// creamos el dataset "buscar", que sera donde se buscara el pais, ya que en
	// el texto se puede encontrar codigo html o otros caracteres
	div.dataset.buscar=k;
 
	// añadimos el elemento a la lista
	lista.append(div);
});
 
// creamos un evento para cada vez que se suelte una tecla en el cuadro de busqueda
document.getElementById("buscar").addEventListener("keyup",function() {
 
	// cojemos el contenido del cuadro de busqueda
	var texto=this.value;
 
	// recorremos toda la lista de paises
	lista.querySelectorAll("div").forEach(function(e){
		if(texto=="") {
 
			// si no hay ningun texto, quitamos el estilo "hide" a todos
			e.classList.remove("hide");
		}else{
 
			// buscamos desde el inicio del nombre del pais
			//var re=new RegExp("^"+texto+"+", "i");
 
			// buscamos en cualquier posición dentro del nombre del pais
			var re=new RegExp(texto+"+", "i");
 
			if(re.test(e.dataset.buscar)) {
				// si hay alguna coincidencia, eliminamos el estilo "hide"
				e.classList.remove("hide");
			}else{
				// añadims el estilo "hide" para ocultar el pais
				e.classList.add("hide");
			}
		}
	})
})
</script>



Comentarios sobre la versión: Versión 1 (2)

Imágen de perfil
8 de Abril del 2018
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Imágen de perfil
12 de Abril del 2018
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s4524