Search that shows the contents of a div

Asked

Viewed 157 times

0

I’m trying to create a website that will help me here at work, which is as follows::

I wanted only one search box to appear on the home page, nothing else. All the necessary content would only appear as I searched.

Ex: When searching for "raw bread recipe" would appear my div with the title and the complete recipe, which I would have already written.

Main questions: Could you at least light my way so I can move on? Is there any way I can do this without having to mess with SQL? (I don’t know anything about SQL) There is a way for me to create a lot of Ivds and hide them, appearing only when searched?

javascript html css website

2 answers

1


Here’s an example of how to do this with Jquery:

<html>
	<head>
		<title>Pesquisar</title>
		<script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
		<script type="text/javascript">
		$( document ).ready(function() {
			$('.contact-name').hide();
			$('#search').click(function(){
				$('.contact-name').hide();
				var txt = $('#search-criteria').val();
				$('.contact-name').each(function(){
				   if($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1){
					   $(this).show();
				   }
				});
			});
		});
		</script>
	</head>
	<body>
		<input type="text" id="search-criteria"/>
		<input type="button" id="search" value="Pesquisar"/>
		<div class="contact-name"><h3><a href="##">João da Silva</a></h3></div>
		<div class="contact-name"><h3><a href="##">Lucas Santos</a></h3></div>
		<div class="contact-name"><h3><a href="##">Matheus Gonçalves</a></h3></div>
	</body>
</html>

  • PQPPPPP FUCK!!! THAT’S EXACTLY WHAT I WANTED!!!!! THANK YOU VERY MUCH

0

Try the code below: type candy, or cake, etc.

	$(function(){
			var data = {
				"receita":
			    [
			        {
			            "nome":"Doce de Leite Ninho",
			            "ingredientes":"200 g de biscoito de maisena.<br>4 colheres (sopa) de manteiga derretida.<br>2 caixas de creme de leite.<br>1 xícara de leite ninho.<br>24 g de <br>elatina incolor sem sabor.<br>200 g de creme de avelã<br>leite em pó a gosto para finalizar.",
			        },
			        {
			        	"nome":"Bolo de Batata Doce",
			            "ingredientes":"3 ovos.<br>1 xícara (chá) de manteiga da terra (manteiga de garrafa)<br>2 xícaras (chá) de açúcar.<br>3 xícaras (chá) de farinha de trigo.<br>3 <br>ícaras (chá) de leite.<br>1 xícara (chá) de coco ralado.<br>1 xícara (chá) de leite de coco.<br>1,5 kg de batata-doce cozida e espremida.",
			        },
			    ]}

			    $("button").click(function(){
			    	$("#resultado").empty();
				    $.each(data.receita, function(i,v){ 
				    	var txt = v.nome.toLowerCase();
				    	var n = txt.indexOf( $("#dsPesquisa").val().toLowerCase() );
				    	if( ( n >= 0 ) && ( $("#dsPesquisa").val().length >= 3 ) )
				    		$("#resultado").append('<h4>' + v.nome + '</h4>' + '<p>' + v.ingredientes + '</p>')
				    })
				    return false;
			    })
			    
	})
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
  	<div class="container">
	  	<div class="row">
	  		<div class="col-12">
	  			<h3 class="mb-3">Pesquisa de Receitas</h3>
	  			<form name="pesquisa" id="pesquisa">
	  				<input type="text" name="dsPesquisa" id="dsPesquisa">
	  				<button>Ok</button>
	  			</form>
	  			<div id="resultado" class="mt-3"></div>
	  		</div>	
	  	</div>    
	</div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>	
  </body>
</html>

Browser other questions tagged javascript html css website

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