Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Buscador en etiquetas <li>

Estas en el tema de Buscador en etiquetas <li> en el foro de Javascript en Foros del Web. Tengo un listado con 200 resultados, en el cual quiero incorporar un buscador input que al escribir vaya dejando solo los resultados que contengan lo ...
  #1 (permalink)  
Antiguo 07/04/2016, 11:54
 
Fecha de Ingreso: marzo-2016
Mensajes: 9
Antigüedad: 8 años, 1 mes
Puntos: 0
Pregunta Buscador en etiquetas <li>

Tengo un listado con 200 resultados, en el cual quiero incorporar un buscador input que al escribir vaya dejando solo los resultados que contengan lo escrito en el campo, alguien sabe como puedo aplicarlo con javascript?


Código HTML:
<ul class="children">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul> 

Muchas Gracias!
  #2 (permalink)  
Antiguo 07/04/2016, 13:02
 
Fecha de Ingreso: junio-2011
Mensajes: 289
Antigüedad: 12 años, 10 meses
Puntos: 15
Respuesta: Buscador en etiquetas <li>

Es un arreglo? una consulta a la BD?
  #3 (permalink)  
Antiguo 07/04/2016, 16:39
Avatar de Fernand0  
Fecha de Ingreso: septiembre-2005
Ubicación: Buenos Aires
Mensajes: 610
Antigüedad: 18 años, 7 meses
Puntos: 19
Respuesta: Buscador en etiquetas <li>

Es mas o menos lo que buscas, por ahi le tendras que modificar algo. Aca dejo el jsFiddle

Código Javascript:
Ver original
  1. var text, links, length;
  2.  
  3. document.addEventListener("DOMContentLoaded", function() {
  4.    
  5.     text = document.getElementById("textToFilter");
  6.     text.addEventListener("keyup", filter);
  7.    
  8.     list = document.getElementById("listToFilter");
  9.     links = list.getElementsByTagName('a');
  10.     length = links.length;
  11.    
  12. });
  13.  
  14. function filter(e) {
  15.    
  16.     var search = text.value,
  17.         regexp = new RegExp(search, "i");
  18.    
  19.     for(var i = 0; i < length; ++i) {
  20.    
  21.         inner = links[i].innerHTML;
  22.        
  23.         if(!regexp.test(inner))
  24.             links[i].parentNode.style.display = "none";
  25.         else
  26.             links[i].parentNode.style.display = "list-item";
  27.        
  28.     }
  29.    
  30. }

Última edición por Fernand0; 07/04/2016 a las 17:40 Razón: improved
  #4 (permalink)  
Antiguo 08/04/2016, 17:43
 
Fecha de Ingreso: marzo-2016
Mensajes: 9
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: Buscador en etiquetas <li>

Cita:
Iniciado por Fernand0 Ver Mensaje
Es mas o menos lo que buscas, por ahi le tendras que modificar algo. Aca dejo el [URL="https://jsfiddle.net/eboeorhk/"]jsFiddle[/URL]

Código Javascript:
Ver original
  1. var text, links, length;
  2.  
  3. document.addEventListener("DOMContentLoaded", function() {
  4.    
  5.     text = document.getElementById("textToFilter");
  6.     text.addEventListener("keyup", filter);
  7.    
  8.     list = document.getElementById("listToFilter");
  9.     links = list.getElementsByTagName('a');
  10.     length = links.length;
  11.    
  12. });
  13.  
  14. function filter(e) {
  15.    
  16.     var search = text.value,
  17.         regexp = new RegExp(search, "i");
  18.    
  19.     for(var i = 0; i < length; ++i) {
  20.    
  21.         inner = links[i].innerHTML;
  22.        
  23.         if(!regexp.test(inner))
  24.             links[i].parentNode.style.display = "none";
  25.         else
  26.             links[i].parentNode.style.display = "list-item";
  27.        
  28.     }
  29.    
  30. }

Etiquetas: buscador, listado
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:16.