Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

rafaelcrvs

Barra de Pesquisa

Por , em Desenvolvimento frontend

Recommended Posts

rafaelcrvs    3

rafaelcrvs
Postado

Pessoal,

 

Não estou conseguindo fazer esta barra retornar apenas o valor escrito nela. Segue o código:

 

<div class="sidebar-search">
 <form class="sidebar-search-form" action="./casas.html" method="get">
    <fieldset>
<input type="text" value="enter keyword here" size="30" id="search" name="search">
<input type="submit" class="search-submit" value="">
    </fieldset>
 </form>
</div>

 

O caminho ./casas.html é por que ainda não publiquei o site, ele está local por enquanto.

 

Abraços,

Rafael

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Não entendi amigo.

 

Que valor ? retornar para onde ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

rafaelcrvs    3

rafaelcrvs
Postado

Olá Willian.

 

Coloquei esta barra de pesquisa em uma página, porém ela não está me retornando nada do que eu pesquiso. Eu escrevo um nome que contém na página, porém ela não me retorna somente este nome, entendeu?

 

Abração,

Rafael

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

então o problema aparentemente não é o html, mas sim o motor que faz a busca.

Compartilhar este post

Link para o post
Compartilhar em outros sites

rafaelcrvs    3

rafaelcrvs
Postado

Não te entendi, o código que eu postei acima está certo? Eu ainda não publiquei o site na web, eu estou desenvolvendo ele em localhost, mas queria testar esta barra de pesquisa.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Sim, o html acima está correto.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcos Xavier    189

Marcos Xavier
Postado

Não tem como te ajudar se você não especificou como você faz sua pesquisa. Não basta colocar um input lá

e automaticamente a pesquisa será feita por acidente.

Coloca ae pra gente ver seu codigo completo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

rafaelcrvs    3

rafaelcrvs
Postado

Olá, não tem banco de dados ainda, pois todo conteúdo ficará na base da dados do servidor da hospedagem (KingHost.com.br)

 

Segue o código da página completo:

 

<!DOCTYPE HTML>
<html lang="en">
<head>


<!-- STYLESHEETS -->
   <link rel="stylesheet" type="text/css" href="./css/960.css" media="all" />
   <link rel="stylesheet" type="text/css" href="./css/style.css" media="all" />
<link rel="stylesheet" type="text/css" href="./css/contact.css" media="all" />
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="all" />

<!-- STANDARD SCRIPTS -->
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.packed.js"></script>
<script type="text/javascript" src="./js/custom.js"></script>

<title>Silence - Contact Us</title>
<meta charset="UTF-8"></head>
<body>


<!-- BEGIN #header-wrapper -->
<div id="header-wrapper">

	<!-- BEGIN .header-bg -->
	<div class="header-bg">

		<!-- BEGIN .glow -->
		<div class="glow">

			<!-- BEGIN #header-small -->
			<div id="header-small">

				<!-- BEGIN #top -->
				<div id="top">

					<!-- BEGIN #top-inner -->
					<div id="top-inner">

						<!-- BEGIN #logo -->
						<div id="logo">

							<a href="#"><img src="./images/logo.png" alt="Logo" /></a>

						</div>
						<!-- END #logo -->

						<!-- BEGIN #nav-wrapper -->
						<div id="nav-wrapper">

							<!-- BEGIN #nav -->
							<ul id="nav">
								<li class="home-page"><a href="./index.html">Home</a>
								<li><a href="./index.html">Menu</a>
									<ul>
										<li><a href="./index-alternate.html">Frontpage Alternate</a></li>
										<li><a href="./index-gallery-306.html">Frontpage Gallery 3 Col</a></li>
										<li><a href="./index-gallery-230.html">Frontpage Gallery 4 Col</a></li>
										<li><a href="./index-gallery-184.html">Frontpage Gallery 5 Col</a></li>
									</ul>
								</li>
								<li><a href="#">Menu 1?</a>
									<ul>
										<li><a href="./index.html">Slides</a></li>
										<li><a href="./index-nivo.html">Nivo Slider</a></li>
										<li><a href="./index-roundabout.html">Roundabout Slider</a></li>
										<li><a href="./index-zaccordion.html">zAccordion Slider</a></li>
										<li><a href="./index-static-big.html">Big Static Image</a></li>
									</ul>
								</li>
								<li><a href="#">Menu 2</a>
									<ul>
										<li><a href="./about-us.html">Alcoolicos</a></li>
										<li><a href="./columns.html">Nao Alcoolicos</a></li>
										<li><a href="./faq.html">FAQ</a></li>
										<li><a href="./galleries.html">Galleries</a></li>
										<li><a href="./leftnav.html">LeftNav</a></li>
										<li><a href="./rightnav.html">RightNav</a></li>
										<li><a href="#">Services</a>
											<ul>
												<li><a href="./services-dark.html">Dark Version</a></li>
												<li><a href="./services-light.html">Light Version</a></li>
											</ul>
										</li>
										<li><a href="./typography.html">Typography</a></li>
									</ul>
								</li>
								<li><a href="#">Menu 3</a>
									<ul>
										<li><a href="./acc-togl-tabs.html">Accordion, Toggles, Tabs</a></li>
										<li><a href="./images.html">Images</a></li>
										<li><a href="./messages.html">Messages</a></li>
										<li><a href="./pricing-table.html">Pricing Tables</a></li>
										<li><a href="./tables.html">Tables</a></li>
										<li><a href="#">Testimonials</a>
											<ul>
												<li><a href="./testimonial-dark.html">Dark Version</a></li>
												<li><a href="./testimonial-light.html">Light Version</a></li>
											</ul>
										</li>
									</ul>
								</li>
								<li><a href="#">Menu 4</a>
									<ul>
										<li><a href="./portfolio-2-col.html">Standard 2 Columns</a></li>
										<li><a href="./portfolio-3-col.html">Standard 3 Columns</a></li>
										<li><a href="./portfolio-4-col.html">Standard 4 Columns</a></li>
										<li><a href="./portfolio-filterable-2-col.html">Filterable 2 Columns</a></li>
										<li><a href="./portfolio-filterable-3-col.html">Filterable 3 Columns</a></li>
										<li><a href="./portfolio-filterable-4-col.html">Filterable 4 Columns</a></li>
										<li><a href="./portfolio-single-standard.html">Single Standard</a></li>
										<li><a href="./portfolio-single-slider.html">Single with Image Slider</a></li>
										<li><a href="./portfolio-single-video.html">Single with Video</a></li>
									</ul>
								</li>
								<li><a href="./blog.html">Blog</a>
									<ul>
										<li><a href="./blog-single.html">Blog Single</a></li>
									</ul>
								</li>
								<li><a href="./contact-us.html">Contact Us</a></li>
							</ul>
							<!-- END ul#nav -->

						</div>
						<!-- END ul#nav-wrapper -->

					</div>
					<!-- END #top-inner -->

				</div>
				<!-- END #top -->

				<div id="page-title">

					<h1>titulo do menu</h1>

				</div>

			</div>
			<!-- END #header-small -->

		</div>
		<!-- END .glow -->

	</div>
	<!-- END .header-bg -->

</div>
<!-- END #header-wrapper -->

		<div class="lines-bg">

			<!-- BEGIN #content -->
			<div id="content" class="container_24">

				<!-- BEGIN .columns -->
				<div class="columns">

					<div class="group">							

						<div class="one_half last_column sidebar">

							<div class="widget">

							  <div class="widget">

								     <h4 class="section-header"><span>Search</span></h4>

								  <div class="sidebar-search">
									  <form class="sidebar-search-form" action="./casas.html" method="get">
										  <fieldset>
											<input type="text" value="enter keyword here" size="30" id="search" name="search"><input type="submit" class="search-submit" value="">
										  </fieldset>
									  </form>
								  </div>

							  </div>

								<ul class="latest-projects">
									<li>
										<div class="latest-project-image">
											<a href="#"><img src="../photos/80x80/1.jpg" alt="post thumb" /></a>
										</div>

										<div class="latest-project-description">
											<a href="#"><h2>casa 1</h2></a>
											<p><h5>Praesent augue lacus, lacinia non tempor at, consectetur ac quam. Phasellus lacinia sem ac urna malesuada egestas...<h5></p>
										</div>
									</li>
									<li>
										<div class="latest-project-image">
											<a href="#"><img src="../photos/80x80/2.jpg" alt="post thumb" /></a>
										</div>

										<div class="latest-project-description">
											<a href="#"><h2>casa 2</h2></a>
											<p><h5>Praesent augue lacus, lacinia non tempor at, consectetur ac quam. Phasellus lacinia sem ac urna malesuada egestas...<h5></p>
										</div>
									</li>
									<li>
										<div class="latest-project-image">
											<a href="#"><img src="../photos/80x80/3.jpg" alt="post thumb" /></a>
										</div>

										<div class="latest-project-description">
											<a href="#"><h2>casa 3</h2></a>
											<p><h5>Praesent augue lacus, lacinia non tempor at, consectetur ac quam. Phasellus lacinia sem ac urna malesuada egestas...<h5></p>
										</div>
									</li>
								</ul>

								<div class="clear"></div>

							</div>

						</div>

					</div>

					<div class="clear"></div>

				</div>
				<!-- END .columns -->

			</div>
			<!-- END #content -->

		</div>

		<!-- BEGIN #footer-wrapper -->
		<div id="footer-wrapper">

			<!-- BEGIN #footer-bg -->
			<div id="footer-bg">

				<!-- BEGIN .footer-glow -->
				<div class="footer-glow">			

					<!-- BEGIN #footer -->
					<div id="footer" class="container_24">

						<div class="columns">

							<div class="one_fourth">

								<h4>From Our Flickr</h4>

								<div id="flickr-feed">

									<ul></ul>

								</div>

							</div>

							<div class="one_half">

								<h4>Recent Tweet</h4>

								<div id="tweets"></div>

								<p class="twitter-feed"><a href="#">Follow Us on Twitter</a> <img src="./images/twitter-icon.png" alt="twitter icon" /></p>

							</div>

							<div class="one_fourth last_column">

								<h4>Subscribe</h4>

								<ul class="subscribe">
									<li><a class="subscribe-fb" href="#"></a></li>
									<li><a class="subscribe-rss" href="#"></a></li>
									<li><a class="subscribe-tw" href="#"></a></li>
									<li><a class="subscribe-fl" href="#"></a></li>
									<li><a class="subscribe-in" href="#"></a></li>
									<li><a class="subscribe-yt" href="#"></a></li>
								</ul>

								<h5>Sign Up for Newsletter</h5>

								<div class="newsletter">
									<form class="newsletter-form" action="#" method="post">
										<fieldset>
											<input type="text" value="enter Your email here" size="30" id="newsletter-email" name="email">
											<input type="submit" class="newsletter-submit" value="">
										</fieldset>
									</form>
								</div>

							</div>

							<div class="clear"></div>

						</div>

						<div class="clear"></div>

					</div>
					<!-- END #footer -->

				</div>
				<!-- END .footer-glow -->

			</div>
			<!-- END #footer-bg -->

		</div>
		<!-- END #footer-wrapper -->

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

html por si só não processa formulário.

 

você precisa de uma linguagem server-side para de fato fazer a pesquisa para você.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Pelo que eu entendi então, quando eu publicar isto no servidor, a pesquisa funcionará, certo?

 

Não. Você não tem rotina de processamento de dados. Quando publicar no servidor vai continuar do jeito que está.

Compartilhar este post

Link para o post
Compartilhar em outros sites

GabrielFerrari    41

GabrielFerrari
Postado

Primeiro de tudo precisa definir onde vão estar as informações a serem buscadas, é um texto em arquivo ou dados de um baco de dados?

Depois precisa escolher uma linguagem server-side como foi dito para fazer a pesquisa e retornar o resultado.

 

Se você não faz ideia de como fazer sugiro usar MySQL e PHP pois são simples de se achar exemplos.

 

Fale um pouco sobre o que você sabe e o que você tem para podermos ter respostas mais precisas.

Compartilhar este post

Link para o post
Compartilhar em outros sites

rafaelcrvs    3

rafaelcrvs
Postado

Olá Gabriel, obrigado!

 

Bom, eu não faço idéia da linguagem server-side, eu peguei um layout pronto e estou dando apenas uma manutenção nele para poder criar o meu site. Neste layout veio esta barra de pesquisa, porém preciso faze-la pesquisar dados na página apenas. Por exemplo, terá uma lista de restaurantes, se eu pesquisar por "resuatrante1" ele vai me retornar apenas o "restaurante1", entendeu?

 

Acredito eu que só se use banco de dados (criar tabelas e etc..) quando o site tem um sistema de cadastro de usuários, por exemplo, estou certo? Por enquanto o meu não tem isso, estou inserindo e editando tudo em html e css (Que já veio com o layout pronto).

 

Obrigado mais uma vez,

Rafael

Compartilhar este post

Link para o post
Compartilhar em outros sites

GabrielFerrari    41

GabrielFerrari
Postado

Falar que não tem como fazer sem DB eu vou estar mentindo, mas já que você não conhece muito acho que seria mais complicado.

 

Acredito eu que só se use banco de dados (criar tabelas e etc..) quando o site tem um sistema de cadastro de usuários, por exemplo, estou certo?

 

Não. rs

 

Na verdade qualquer coisa pode ser armazenada no banco, depende da necessidade, é bem fácil criar uma página para cadastrar e editar os restaurantes e depois busca-lo.

 

Podemos auxiliar você a isso mas vai precisar de um pouco de esforço e estudo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

rafaelcrvs    3

rafaelcrvs
Postado

Entendi, então você acha que para pesquisar na página será extremamente necessário a criação do banco mesmo?

 

Claro, gostaria de uma ajuda. Por onde eu começo lendo? hahaha

 

Abraços e obrigado pela atenação.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Extremamente necessário, não. A galera de Javascript pode dar uma força, considerando que você terá apenas páginas estáticas.

 

<div id="conteudo">
<ul id="lista_restaurantes">
   <li>
       <h1>Nome do restaurante 1</h1>
       <h2>Comida mineira, de primeira!</h2>
       <p>Descrição sobre o restaurante</p>
       <address>Endereço</address>
   </li>
   <li>
       <h1>Nome do restaurante 2</h1>
       <h2>As legítimas massas italianas</h2>
       <p>Descrição sobre o restaurante</p>
       <address>Endereço</address>
   </li>
   <li>
       <h1>Nome do restaurante 3</h1>
       <h2>Restaurante vegano preserva os animais</h2>
       <p>Descrição sobre o restaurante</p>
       <address>Endereço</address>
   </li>
</ul>
</div>
<p><label for="search">Faça uma pesquisa:</label><input type="text" id="search" /></p>
<script>
   restaurantes = document.getElementById('lista_restaurantes').getElementsByTagName('li');
   document.getElementById('search').onkeyup = function () {
       var i = 0, searchbox = this;
       for(; i < restaurantes.length; i += 1) (function () {
           var style = 'none', r = restaurantes[i];
           if (r.innerHTML.match(searchbox.value)) {
               style = 'block';
           }
           r.style.display = style;
       } ());
   };
</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito