1

Necesito realizar busqueda dentro de un formulario con varias filas, mas de 100 de hecho, tengo mi input para ingresar el valor a buscar:

<div class="col-md-4 col-sm-2 col-xs-2">
 <div class="form-group">
  <h4 for="inputSearch">Buscar códigos</h4>
   <input type="search" style="border-radius: 5px;" class="form-control" id="inputSearch" placeholder="Ingrese un código a buscar">                                    
 </div>
</div>

y los valores que necesito buscar se encuentran entre varios div

<!-- Fila 1 -->
<div class="row co1024 co1592 co104">                       
    <div class="col-md-2">
        <div class="container-fluid">
            <div class="row">
                <f22code data-valor="cod1592" class="col-md-6">            
                        <div class="input-group">
                            <div class="input-group-addon input-group-num ng-binding" ng-bind="1592">1592</div>    
                        </div>
                    </div>                    
                </f22code>
                <f22code data-valor="cod1024" class="col-md-6">                          
                    <div class="input-group-addon input-group-num ng-binding" ng-bind="1024">1024</div>   
                </f22code>
            </div>
        </div>
    </div>                        
    <f22code data-valor="cod104" data-signo="+" class="col-md-2">
            <div class="input-group">                
                <div class="input-group-addon input-group-num ng-binding" ng-bind="104">104</div>               
            </div>
        </div>        
    </f22code>
</div>
<!-- Fila 2   -->               
<div class="row co106 ">
    <f22label data-numlinea="3" class="col-md-6">
        <div class="f22label-container">
            <div  class="f22label-num ng-binding">3</div>
        </div>
    </f22label>
    <f22code data-valor="cod106" data-signo="+" class="col-md-6">
            <div class="input-group">                
                <div class="input-group-addon input-group-num ng-binding" ng-bind="106">106</div>
            </div>
        </div>        
    </f22code>
</div>
<!-- Fila 3 -->
<div class="row co1024 co107">
    <f22label data-numlinea="3" class="col-md-6">
        <div class="f22label-container">
            <div  class="f22label-num ng-binding">3</div>
        </div>
    </f22label>
    <f22code data-valor="cod1024" data-signo="+" class="col-md-6">
            <div class="input-group">                
                <div class="input-group-addon input-group-num ng-binding" ng-bind="1024">1024</div>
            </div>
        </div>        
    </f22code>
    <f22code data-valor="cod107" data-signo="+" class="col-md-6">
        <div class="input-group">                
            <div class="input-group-addon input-group-num ng-binding" ng-bind="107">107</div>
        </div>
    </div>        
</f22code>
</div>

por ejemplo necesito buscar el valor 107 este valor esta en la Fila 3 por tanto desearia ocultar los demas fila 2 y fila 1, pero si busco el valor 1024, el cual esta dentro de la Fila 1 y Fila 3 necesito ocultar la fila 2, como podria hacer esto?

lo que necesito es basicamente dejar visible los div con clase row como padre donde dentro contienen estos valores buscados...

estoy ptobando con este codigo js

//Variables

inputSearch =  document.getElementById("inputSearch");


//Creando filtrado de busqueda

document.getElementById("inputSearch").addEventListener("keyup", buscador_interno);

function buscador_interno() {
    filter = inputSearch.value.toUpperCase();
    div = formulario.getElementsByTagName("div");

    //Recorriendo elementos a filtrar mediante los "div"

    for (i=0; i < div.length; i++){
        
        a = div[i].getElementsByTagName("div")[0];
        textValue = a.textContent || a.innerText;

        if(textValue.toUpperCase().indexOf(filter) > -1){
            div[i].style.display = " ";
        }else {
            div[i].style.display = "none";
        }

    }
}
4
  • ¿Estás usando angular? Parece que sí, en cuyo caso deberías intentar hacerlo al modo de Angular. No he usado esa biblioteca en mucho tiempo, pero supongo que generas los div's a partir de un array de datos o algo (si ese es el caso, sería ideal que pusieras el código que genera los div's también), y podrías aplicar filter o algún método en lugar de usar JavaScript puro/jQuery.
    – Alvaro Montoro
    Commented el 24 feb. 2021 a las 3:02
  • gracias por el comentario amigo, honestamente tomamos el diseño de otro formulario que si es operativo y con angular creo, en este caso lo tomamos porque necesitamos el diseño nada mas, y dentro de ello me pidieron realizar un buscador por codigo, por tanto no tengo ningun array dentro de ello, por eso necesito para esta sección que solo es html y css el realizar esta busqueda amigo. Commented el 24 feb. 2021 a las 3:06
  • Ok. ¿Qué has intentado? ¿Cómo estás generando los divs? Deberías compartir el código JS también
    – Alvaro Montoro
    Commented el 24 feb. 2021 a las 3:17
  • 1
    he agregado mas menos el codigo que estoy probando por ahora pero no me resulta de momento. Commented el 24 feb. 2021 a las 4:05

1 respuesta 1

2

Unas notas primero:

  • Estás cerrando un </div> de más en cada fila (junto antes de cerrar el </f22code>). No creo que esto sea lo que está haciendo que no funcione, pero es algo a tener en cuenta porque puede dar problemas. Lo añadí al ejecutable de abajo.
  • En tu código usas la variable formulario que no está definida y no se sabe lo que es. Para simplificar, he puesto un <form> envolviendo todo el código y le he dado ese ID. Supongo que ya lo tienes en tu código y se te olvidó copiarlo.

Con esas dos cosas en la demo de abajo, el código corre pero da un error: no se puede leer el valor textContent de undefined.

Sólo hay un línea donde se usa textContent:

a = div[i].getElementsByTagName("div")[0];
textValue = a.textContent || a.innerText;  // <----- aquí da el error

Y el problema es que tal y como lo estás haciendo se seleccionan todos los <div>, incluso los que no tienen descendientes. Por eso llega un momento en el que al haver a = div[i].getElementsByTagName("div")[0];, el resultado va a ser undefined.

Un solución rápida sería comprobar que a existe antes de ejecutar el bloque siguiente. Y con eso el problema se soluciona, como puedes ver aquí:

//Variables

inputSearch = document.getElementById("inputSearch");
formulario = document.getElementById("formulario");

//Creando filtrado de busqueda

document.getElementById("inputSearch").addEventListener("keyup", buscador_interno);

function buscador_interno() {
  filter = inputSearch.value.toUpperCase();
  div = formulario.getElementsByTagName("div");

  //Recorriendo elementos a filtrar mediante los "div"

  for (i = 0; i < div.length; i++) {

    a = div[i].getElementsByTagName("div")[0];
    if (a) {
      textValue = a.textContent || a.innerText;

      if (textValue.toUpperCase().indexOf(filter) > -1) {
        // si pones espacio en blanco en lugar de cadena vacía el resultado no es el esperado!
        div[i].style.display = "";
      } else {
        div[i].style.display = "none";
      }
    }
  }
}
<div class="col-md-4 col-sm-2 col-xs-2">
  <div class="form-group">
    <h4 for="inputSearch">Buscar códigos</h4>
    <input type="search" style="border-radius: 5px;" class="form-control" id="inputSearch" placeholder="Ingrese un código a buscar">
  </div>
</div>


<form id="formulario">
  <!-- Fila 1 -->
  <div class="row co1024 co1592 co104">
    <div class="col-md-2">
      <div class="container-fluid">
        <div class="row">
          <f22code data-valor="cod1592" class="col-md-6">
            <div class="input-group">
              <div class="input-group-addon input-group-num ng-binding" ng-bind="1592">1592</div>
            </div>
          </f22code>
          <f22code data-valor="cod1024" class="col-md-6">
            <div class="input-group-addon input-group-num ng-binding" ng-bind="1024">1024</div>
          </f22code>
        </div>
      </div>
    </div>
    <f22code data-valor="cod104" data-signo="+" class="col-md-2">
      <div class="input-group">
        <div class="input-group-addon input-group-num ng-binding" ng-bind="104">104</div>
      </div>
    </f22code>
  </div>
  <!-- Fila 2   -->
  <div class="row co106 ">
    <f22label data-numlinea="3" class="col-md-6">
      <div class="f22label-container">
        <div class="f22label-num ng-binding">3</div>
      </div>
    </f22label>
    <f22code data-valor="cod106" data-signo="+" class="col-md-6">
      <div class="input-group">
        <div class="input-group-addon input-group-num ng-binding" ng-bind="106">106</div>
      </div>
    </f22code>
  </div>
  <!-- Fila 3 -->
  <div class="row co1024 co107">
    <f22label data-numlinea="3" class="col-md-6">
      <div class="f22label-container">
        <div class="f22label-num ng-binding">3</div>
      </div>
    </f22label>
    <f22code data-valor="cod1024" data-signo="+" class="col-md-6">
      <div class="input-group">
        <div class="input-group-addon input-group-num ng-binding" ng-bind="1024">1024</div>
      </div>
    </f22code>
    <f22code data-valor="cod107" data-signo="+" class="col-md-6">
      <div class="input-group">
        <div class="input-group-addon input-group-num ng-binding" ng-bind="107">107</div>
      </div>
    </f22code>
  </div>

</form>


Ahora que ya tienes una solución, y aparte de los comentarios de arriba, hay otras cosas en el código que igual deberías plantearte cambiar:

  • No estás usando var, let o const para declarar tus variables. Eso hará que se declaren como variables globales y puede llevar a problemas con conflictos en diferentes funciones (algo que puede ser difícil de debuguear)
  • El código parece copiado de una aplicación Angular, pero no usa angular. No parece que necesites algunos de los atributos y clases que estás usando (los que empiezan por ng-), y podría limpiarse el código.
  • La búsqueda en sí es algo ineficiente, no necesitas recorrer todos los <div>, te bastaría con atravesar los div que tengan clase "row" y comprobar si la cadena se encuentra en alguna parte del textContent. Eso hará el código más eficiente y rápido.

De hecho, por este último punto, la implementación de arriba tampoco funciona del todo, porque una vez se esconde una celda (que no una fila), ya no se vuelve a mostrar a no ser que se ponga un valor correcto. Es por eso que debes seleccionar sólo la fila y comparar el contenido, y no cada celda individualmente.

Algo como esto:

//Variables

inputSearch = document.getElementById("inputSearch");
formulario = document.getElementById("formulario");

//Creando filtrado de busqueda

document.getElementById("inputSearch").addEventListener("keyup", buscador_interno);

function buscador_interno() {
  filter = inputSearch.value.toUpperCase();
  div = formulario.querySelectorAll("div.row");
  
  //Recorriendo elementos a filtrar mediante los "div"
  for (let i = 0; i < div.length; i++) {
    if (div[i].textContent.toUpperCase().indexOf(filter) > -1) {
      div[i].style.display = "";
    } else {
      div[i].style.display = "none";
    }
  }
}
<div class="col-md-4 col-sm-2 col-xs-2">
  <div class="form-group">
    <h4 for="inputSearch">Buscar códigos</h4>
    <input type="search" style="border-radius: 5px;" class="form-control" id="inputSearch" placeholder="Ingrese un código a buscar">
  </div>
</div>


<form id="formulario">
  <!-- Fila 1 -->
  <div class="row co1024 co1592 co104">
    <div class="col-md-2">
      <div class="container-fluid">
        <div class="row">
          <f22code data-valor="cod1592" class="col-md-6">
            <div class="input-group">
              <div class="input-group-addon input-group-num ng-binding" ng-bind="1592">1592</div>
            </div>
          </f22code>
          <f22code data-valor="cod1024" class="col-md-6">
            <div class="input-group-addon input-group-num ng-binding" ng-bind="1024">1024</div>
          </f22code>
        </div>
      </div>
    </div>
    <f22code data-valor="cod104" data-signo="+" class="col-md-2">
      <div class="input-group">
        <div class="input-group-addon input-group-num ng-binding" ng-bind="104">104</div>
      </div>
    </f22code>
  </div>
  <!-- Fila 2   -->
  <div class="row co106 ">
    <f22label data-numlinea="3" class="col-md-6">
      <div class="f22label-container">
        <div class="f22label-num ng-binding">3</div>
      </div>
    </f22label>
    <f22code data-valor="cod106" data-signo="+" class="col-md-6">
      <div class="input-group">
        <div class="input-group-addon input-group-num ng-binding" ng-bind="106">106</div>
      </div>
    </f22code>
  </div>
  <!-- Fila 3 -->
  <div class="row co1024 co107">
    <f22label data-numlinea="3" class="col-md-6">
      <div class="f22label-container">
        <div class="f22label-num ng-binding">3</div>
      </div>
    </f22label>
    <f22code data-valor="cod1024" data-signo="+" class="col-md-6">
      <div class="input-group">
        <div class="input-group-addon input-group-num ng-binding" ng-bind="1024">1024</div>
      </div>
    </f22code>
    <f22code data-valor="cod107" data-signo="+" class="col-md-6">
      <div class="input-group">
        <div class="input-group-addon input-group-num ng-binding" ng-bind="107">107</div>
      </div>
    </f22code>
  </div>

</form>

1
  • Alvaro muchisimas gracias por la ayuda, de verdad era justo lo que necesitaba, agregue una pequeña modificación al codigo en el js en esta parte: div = formulario.querySelectorAll("div.row"); pasando de div.row a div.buscando, div = formulario.querySelectorAll("div.buscando"); agregando esta clase dentro de los div que necesitaba y ocultando solamente esos, asi no pasaba a ocultar las cabeceras de las distintas secciones del formulario... Muchisimas gracias por el ejemplo y el tiempo de tu parte en la ayuda... Commented el 24 feb. 2021 a las 21:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.