0

Fala galera, seguinte:

Tenho nomes de usuários vindo do BD mysql sendo exibidos na tela cada um em sua respectiva div, e tenho um input de busca que quando alguma coisa for digitada nele gostaria que as divs com os nomes de usuários que não correspondessem ao que foi digitado fossem ocultadas da tela.

O desafio é o seguinte: Fazer isso sem dar refresh na página, e sem fazer requisição à outras páginas com ajax (as duas formas eu sei fazer). Gostaria de fazer esse filtro apenas com Javascript/jQuery na própria página.

Será que tem como?

Desde já agradeço muito qualquer ajuda.

4
  • Tem duas perguntas bem parecidas com a sua que podem lhe ajudar. esta e esta outra Commented 9/08/2019 às 1:23
  • Valeu @MuriloPortugal, mas esse não seria o caso, pois como eu disse, via Post ou Get com ajax mandando para outra página e requisitando os dados sem refresh eu sei fazer. O grande desafio mesmo é saber se tem como eu fazer isso apenas com Javascript/Jquery sem requisitar nada de outras páginas, apenas dentro da atual, ocultando as divs com nomes de usuários que não correspondam com o que foi digitado no input de pesquisa/filtro. Commented 9/08/2019 às 1:32
  • Entendi, eu achei que o seu input iria fazer uma busca no banco conforme o usuário digitasse. vou criar uma resposta com o código que pode lhe ajudar. Commented 9/08/2019 às 1:47
  • Muito obrigado pela prestatividade @MuriloPortugal. Aguardo ansiosamente...rsrs Commented 9/08/2019 às 1:56

2 Respostas 2

2

Amigo, veja se o código abaixo pode lhe ajudar :)

<!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>

A Fonte do código é o site https://www.w3schools.com/jquery/jquery_filters.asp Eu já havia visto esse filtro antes, então resolvi comentar ele pra você, pra você ver como funciona, espero que ajude!

1
  • Muito obrigado @Heathcliff era exatamente isso que eu estava procurando. Show de bola!!! Commented 9/08/2019 às 3:13
1

Amigo, como disse que só precisa ocultar as divs conforme o usuário digita o nome no input o código abaixo pode lhe ajudar.
Ao digitar o nome no campo input e apertar a tecla ENTER para disparar o evento ele vai procurar pelas divs que tiverem o mesmo ID que for digitado no input e então vai ocultar a mesma. (obs: não precisa digitar o nome completo tente digitar somente o início do nome e de 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>

Para isso foi utilizado o método change e o selector attributeStartsWith ambos do jQuery.

2
  • Muito obrigado meu amigo, sua resposta foi de muito grande ajuda. Tenho duas dívidas apenas quanto à isso: Do jeito que vc colocou no exemplo está ocultando a div que contém a correspondência do que foi digitado no input, mas se eu quiser fazer o contrário (ocultando as divs que não tem correspondência com o que foi digitado, como faço?). A segunda dúvida é sobre a especificidade dessa comparação que é feita, do jeito que está ele compara apenas o início exato do que está na div, teria como deixar essa comparação mais tolerante como o "%LIKE%" do mysql? Commented 9/08/2019 às 2:57
  • 1
    Para fazer o oposto use :not :contains assim $('div:not(:contains('+ $( this ).val() +'))').hide(); e para ficar mais tolerante substitua o caracter ^ por * ficando assim $( "div[id*='"+$( this ).val()+"']" ).hide(true); mas dessa maneira ele vai ocultar qualquer div que tenha aquela letra em qualquer posição do ID. Commented 9/08/2019 às 3:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .