El caso es el siguiente, estoy usando este "snippet" de código Jquery
que encontré que me facilita la búsqueda de elementos en el html
sin recargar.
var buscador = $(".buscador");
//Activar el buscador
buscador.keyup(function() {
_this = this;
// grupo de cosas que se ocultaran
$.each($("#grupo-busqueda ul li"), function() {
if (
$(this)
.text()
.toLowerCase()
.indexOf(
$(_this)
.val()
.toLowerCase()
) === -1
){
$(this).hide();
}
else {
$(this).show();
}
});
});
});
Y tengo una estructura de html
no puede cambiar:
<h3>título</h3>
<article class="subseccion">
<h4>Lista 1</h4>
<ul class="lista">
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
</ul>
<h4>Lista 2</h4>
<ul class="lista">
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
</ul>
</article>
<h3>título</h3>
<article class="subseccion">
<h4>Lista 1</h4>
<ul class="lista">
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
</ul>
<h4>Lista 2</h4>
<ul class="lista">
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
</ul>
</article>
<!--..etc se repite en bucle-->
Y me funciona, pero, la idea es que los títulos de cada resultado de búsqueda se mantengan (para que se sepa en qué categoría están los resultados) y el resto de títulos también desaparezcan.
Intente agregando esto:
$(this).parent().parent().prev().show();
Pero, no funciona en todas mis pruebas o esconde todos los <h3>
o los muestra todos.
¿Que estoy haciendo mal?
A continuación esta es una demo simplificada de lo que he intentado de momento:
// Write on keyup event of keyword input element
$(document).ready(function() {
// VARIABLES GLOBALES
var web = $(document);
var buscador = $(".buscador");
//función para abrir los plegables
buscador.focus(function(){
$(".lista").toggleClass("open");
});
//Activar el buscador
buscador.keyup(function() {
_this = this;
// grupo de cosas que se ocultaran
$.each($("#grupo-busqueda .subseccion li, #grupo-busqueda .subseccion"), function() {
if (
$(this)
.text()
.toLowerCase()
.indexOf(
$(_this)
.val()
.toLowerCase()
) === -1
){
$(this).hide();
}
else {
$(this).show();
$(this).parent().parent().find('h3').hide()
//Actualizado segun respuesta dada y no funciona
$(this).parent().parent().prevAll('h3:first').show();
}
});
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h3 id="th">Talento Humano <b>TH</b></h3>
<div id="grupo-busqueda">
<section class="configuracion">
<h5 class="titulo">Configuración</h5>
<input class="buscador" type="text">
</section>
<h3 id="th">Talento Humano <b>TH</b></h3>
<article class="subseccion formatos">
<h4 title="clic para ver el resto de archivos" tabindex="1">Formatos</h2>
<ul class="lista">
<li>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
ENTREGA DE CARNET
</a>
</li>
<li>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
ENTREGA DE TARJETAS INGRESO EDIFICIO
</a>
</li>
<li>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
FORMATO ACTUALIZACION DE DATOS EMPLEADOS
</a>
</li>
<li>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
FORMATO INDUCCION DE PERSONAL
</a>
</li>
<li>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
FORMATO ENTREGA EQUIPOS DE TRABAJO
</a>
</li>
<li>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
FORMATO HOJA DE VIDA
</a>
</li>
<li>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
FORMATO LEGALIZACION GASTOS DE VIAJE
</a>
</li>
<li>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
FORMATO SOLICITUD CAPACITACION
</a>
</li>
<li>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
FORMATO SOLICITUD DE AUSENTISMO
</a>
</li>
<li>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
FORMATO SOLICITUD DE PRESTAMOS
</a>
</li>
<li>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
FORMATO SOLICITUD DE VACACIONES
</a>
</li>
<li>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
FORMATO SOLICITUD GASTOS DE VIAJE
</a>
</li>
<li>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
FORMATO INSCRIPCIÓN-ACTUALIZACIÓN DE DATOS DE PROVEEDORES
</a>
</li>
<li>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
FORMATO PAZ Y SALVO RETIRO DE PERSONAL
</a> </li>
<li>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
FORMATO REQUISICION DE PERSONAL
</a>
</li>
<li>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
FORMATO LISTA DE CHEQUEO DOCUMENTOS EN CARPETAS EMPLEADOS
</a>
</li>
<li>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
FORMATO VERIFICACION DE REFERENCIAS LABORALES
</a>
</li>
<li>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
FORMATO PERFIL DE CARGO
</a>
</li>
<li>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
FORMATO ENTREVISTA PERSONAL
</a>
</li>
<li>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
SOLICITUD DE DOCUMENTOS
</a>
</li>
<li>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
FORMATO CITACION A DESCARGOS
</a>
</li>
<li>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
ACTA DE DESCARGOS
</a>
</li>
<li>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
LLAMADO DE ATENCION
</a>
</li>
</ul>
</article>
<article class="subseccion procedimientos">
<h4 title="clic para ver el resto de archivos" tabindex="2">Procedimientos</h2>
<ul class="lista procedimientos">
<li>
<b>TH-P-1</b>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
PROCEDIMIENTO DISCIPLINARIO
</a>
</li>
<li><b>TH-P-2</b>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
PROCEDIMIENTO DE SELECCIÓN Y RETIRO DE PERSONAL 
</a>
</li>
<li><b>TH-P-4</b>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
PROCEDIMIENTO SOLICITUD DE GASTOS DE VIAJE
</a>
</li>
<li><b>TH-P-3</b>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
PROCEDIMIENTO LEGALIZACION DE GASTOS DE VIAJE
</a>
</li>
</ul>
</article>
<h3 id="lc">Gestión en la liquidación y cierre de proyectos <b>LC</b></h1>
<article class="subseccion formatos">
<h4 title="clic para ver el resto de archivos" tabindex="3">Formatos</h2>
<ul class="lista formatos">
<li><b>LC-F-1</b>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
MATRIZ CONTRACTUAL
</a>
</li>
</ul>
</article>
<article class="subseccion procedimientos">
<h4 title="clic para ver el resto de archivos" tabindex="4">Procedimientos</h2>
<ul class="lista procedimientos">
<li><b>LC-P-1</b>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
PROCEDIMIENTO DE IDENTIFICACIÓN DE REQUISITOS LEGALES Y OTROS
</a>
</li>
</ul>
</article>
<h3 id="de">Direccionamiento Estratégico <b>DE</b></h1>
<article class="subseccion formatos">
<h4 title="clic para ver el resto de archivos" tabindex="5">Formatos</h2>
<ul class="lista formatos">
<li><b>DE-F-1</b>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
FORMATO ANALISIS DE IMPACTO AL NEGOCIO
</a>
</li>
<li><b>DE-F-2</b>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
ACTA DE REUNION
</a>
</li>
</ul>
</article>
<h3 id="gd">Gestión Documental <b>GD</b></h1>
<article class="subseccion formatos">
<h4 title="clic para ver el resto de archivos" tabindex="6">Formatos</h4>
<ul class="lista formatos">
<li><b>GD-F-1</b>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
CONTROL DE INGRESO A ÁREAS RESTRINGIDAS
</a>
</li>
<li><b>GD-F-2</b>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
FORMATO REPORTE Y GESTION DE INCIDENTES DE SEGURIDAD DE LA INFORMACIÒN
</a>
</li>
</ul>
</article>
<article class="subseccion procedimientos">
<h4 title="clic para ver el resto de archivos" tabindex="7">Procedimientos</h2>
<ul class="lista procedimientos">
<li><b>GD-P-1</b>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
PROCEDIMIENTO DE CONTROL DE DOCUMENTOS
</a>
</li>
<li><b>GD-P-2</b>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
PROCEDIMIENTO DE CLASIFICACION Y ETIQUETADO DE LA INFORMACION
</a>
</li>
<li><b>GD-P-3</b>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
PROCEDIMIENTO DE AUDITORIA INTERNA
</a>
</li>
<li><b>GD-P-4</b>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
PROCEDIMIENTO DE GESTION DE CAMBIOS
</a>
</li>
<li><b>GD-P-5</b>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
PROCEDIMIENTO DE GESTION DE INCIDENTES DE SEGURIDAD DE LA INFORMACION
</a>
</li>
<li><b>GD-P-6</b>
<a title="clic para abrir en otra ventana" target="_blank" href="#">
PROCEDIMIENTO DE MONITOREO DE INFRAESTRUCTURA
</a>
</li>
</ul>
</article>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Por si no ha quedado claro, en la demo anterior, en el resultado de la búsqueda, aún se ven todos los <h3>
y la idea es que no se muestren, que solo se vean los <h3>
que estén antes del <article>
que si contiene el resultado de la búsqueda.
Agradecería cualquier pista.