1

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&nbsp
          </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.

1 respuesta 1

2

Con esto coges el primer h3 de todos los previos al elemento.

$(this).parent().parent().prevAll('h3:first').show();

$(document).ready(function() {
	$('#click').parent().parent().prevAll('h3:first').css('color','red');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>título1</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 2</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 id="click"><a>Item</a></li>
    <li><a>Item</a></li>
    <li><a>Item</a></li>
  </ul>

</article>

ejemplo: https://jsfiddle.net/gjt1osza/7/

2
  • Hola, he probado añadiendo selector modificado como me dices en el snippet del buscador, pero no me funciona. :C. Añadí lo que me dices a la demo de mi pregunta, para que cuando tengas tiempo lo revises gracias. Commented el 18 abr. 2018 a las 14:58
  • Claro, porque en ningún momento estás ocultando los demás h3. Por ejemplo podrías poner: $(this).parent().parent().find('h3').hide(); antes de la linea nueva que has puesto
    – toni lopez
    Commented el 19 abr. 2018 a las 9:45

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.