Filter results from BD with JS (no refresh and no request to other pages)

Asked

Viewed 132 times

0

Talk, you guys, next:

I have names of users coming from mysql BD being displayed on the screen each in their respective div, and I have a search input that when something is typed in it would like the Divs with the names of users that did not match what was typed were hidden from the screen.

The challenge is as follows: Do this without refreshing the page, and without requesting other pages with ajax (the two forms I know how to do). I would like to make this filter only with Javascript/jQuery on the page itself.

I wonder if there’s a way?

Thanks so much for any help.

javascript jquery

  • You have two very similar questions to yours that might help you. this and this other

  • It was worth @Muriloportugal, but this would not be the case, because as I said, via Post or Get with ajax sending to another page and ordering the data without refresh I know how to do. The real challenge is to know if I can do this only with Javascript/Jquery without ordering anything from other pages, just inside the current one, hiding the Divs with user names that do not match what was typed in the search/filter input.

  • Got it, I thought your input would do a database search as the user type. I will create a response with the code that can help you.

  • Thank you so much for the service @Muriloportugal. I look forward to...

2 answers

2


Friend, see if the code below can help you :)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>

<!-- Container de Busca -->
<div id="containerBusca">
	<!-- Usuários -->
	<div id="wanderson">Wanderson</div>
	<div id="borges">Borges</div>
	<div id="stack">Stack</div>
	<div id="overflow">Overflow</div>
	<div id="heathcliff">Heathcliff</div>
</div>

<!-- Busca -->
<input type="text" name="buscauser" id="buscaUser">

<script type="text/javascript">
// Ao Digitar qualquer tecla no Input executa a Função
$("#buscaUser").on("keyup", function() {
	// Deixa em variavel o valor que está sendo digitado no input (coloca em minusculo)
	let value = $(this).val().toLowerCase();
	// usando o ".filter" Filtra todas as divs em busca do valor digitado
	$("#containerBusca div").filter(function() {
		// Exibe apenas a div que corresponde ao elemento buscado
		$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
	});
});
</script>
</body>
</html>

The source of the code is the site https://www.w3schools.com/jquery/jquery_filters.asp I had seen this filter before, so I decided to comment on it for you, to see how it works, I hope it helps!

  • Thank you very much @Heathcliff was exactly what I was looking for. Ball show!!!

1

Friend, as you said you only need to hide the Divs as the user type the name in the input the code below can help you.
By entering the name in the input field and pressing the ENTER key to trigger the event it will search for the Ivs that have the same ID as the input and then hide it. (Obs: no need to enter the full name try to enter only the beginning of the name and Enter) 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>teste</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div id="Mauricio">Mauricio</div>
<div id="Alice">Alice</div>
<div id="Maria">Maria</div>
 <input type="text" name="busca">
<script>
  //Toda vez que o texto do input mudar executa a function
  $( "input[type='text']" ).change(function() {
    // Deixa oculto as divs que iniciarem com oq foi digitado no input.
    $( "div[id^='"+$( this ).val()+"']" ).hide(true);
  });

</script>
 
</body>
</html>

The method was used for this change and the selector attributeStartsWith both from jQuery.

  • Thank you very much my friend, your reply was very helpful. I have two debts just about this: The way you put it in the example is hiding the div that contains the correspondence of what was typed in the input, but if I want to do the opposite (hiding the Divs that do not match what was typed, how do I?). The second question is about the specificity of this comparison that is made, the way it is comparing only the exact beginning of what is in the div, would have to leave this comparison more tolerant as the "%LIKE%" of mysql?

  • 1

    To do the opposite use :not :contains like this $('div:not(:contains('+ $( this ).val() +'))').hide(); and to become more tolerant replace the character ^ by * thus remaining $( "div[id*='"+$( this ).val()+"']" ).hide(true); but this way it will hide any div that has that letter in any ID position.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.