1

tengo un filtro de resultados pero necesito que al escribir en el recuadro de búsqueda los títulos desaparezcan; justo como lo que hace el código a continuación:

$(document).ready(function () {
    (function ($) {
        $('#buscar').keyup(function () {
            var rex = new RegExp($(this).val(), 'i');
            $('#aBuscar p').hide();
            $('#aBuscar p').filter(function () {
				return rex.test($(this).text());
			}).show();
		})
	}(jQuery));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="buscar" placeholder="Buscar">
 <div id="aBuscar">
  <h1>Titulo0</h1>
  <p>buscar</p>
  <p>encontrar</p>
  <h1>Titulo1</h1>
  <p>correr</p>
  <p>detenerse</p>
 </div>

La función la utilice de la respuesta de otro usuario pero solo falta que me oculte los títulos al comenzar a escribir en el recuadro de búsqueda y luego que los muestre cuando se borre todo el contenido del recuadro de búsqueda.

Agradeciendo de antemano su ayuda.

3
  • Puedes capturar eventos de teclado y cada vez que se pulse una tecla ver si el campo de búsqueda tiene algo, en ese caso, ocultas los títulos.
    – XBoss
    el 1 jul. 2018 a las 16:45
  • Hola @AntoniCobos, sencilla tu respuesta pero me funcionó.
    – soyjohanm
    el 1 jul. 2018 a las 16:54
  • Me alegro haberte ayudado, Suerte!
    – XBoss
    el 1 jul. 2018 a las 17:02

1 respuesta 1

0

Sólo tenía que verificar si el campo de búsqueda estaba vacío o no; de no estarlo simplemente oculto los títulos.

$(document).ready(function () {
    (function ($) {
        $('#buscar').keyup(function () {
            var rex = new RegExp($(this).val(), 'i');
            $('#aBuscar p').hide();
            $('#aBuscar p').filter(function () {
				return rex.test($(this).text());
			}).show();
			if ($('#buscar').val() == "") {
				$('#aBuscar h1').show();
				return false;
			} else {
				$('#aBuscar h1').hide();
			}
		})
	}(jQuery));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="buscar" placeholder="Buscar">
        <div id="aBuscar">
            <h1>Titulo0</h1>
            <p>buscar</p>
            <p>encontrar</p>
            <h1>Titulo1</h1>
            <p>correr</p>
            <p>detenerse</p>
	  </div>

Realmente sencillo, sólo necesitaba un poco de iluminación.

Tu Respuesta

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

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