remove titles by filtering results

Question

remove titles by filtering results

Navigation

#1 by (0 votes)

1

I have a filter of results but I need that when writing in the search box the titles disappear; just like what the code does next:

$(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>

The function uses it from the response of another user but it only needs to hide the titles when starting to write in the search box and then show them when all the contents of the search box are deleted.

Thanking you in advance for your help.

javascript html

asked by Johan Solano Contreras 01.07.2018 в 18:42

source

1 answer

Replace values in a CSV Python pyqt5 does not center the window

score 0 · Accepted Answer

I just had to check if the search field was empty or not; if not, simply hide the titles.

$(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>

Really simple, I just needed a little lighting.