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";
}
}
}
filter
o algún método en lugar de usar JavaScript puro/jQuery.