CAIXA DE BUSCA QUE FAZ A BUSCA CONFORME VAI DIGITANDO

[Juinior Oliveira 0]

Ola pessoal alguem poderia me dizer como eu faço para que a minha caixa de busca ela faz a busca no banco conforme eu vou digitado as palavras

este é meu código

 

<style type="text/css">
{
color: #666;
font: 90%/180% Arial, Helvetica, Sans-serif;
width: 800px;
max-width: 96%;
margin: 0 auto;
}
a {
 
  color: #69c;
text-decoration: none;
}
a:hover {
   color: #f43319;
}
p {
   margin: 0 0 20px;
}


input {
  outline: none;
}
input[type=search] {
 -webkit-appearance: textfield;
 -webkit-box-sizing: content-box;
 font-family: inherit;
font-size: 100%;
}
input: :-webkit-search-decoration,
input: :-webkit-search-cancel-button {
   display: none;
}


input[type=search] {
  background: #1213312
url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
    border: solid 0px #000;
   padding: 15px 85px 9px   19px;
  width: 100px;


     -webkit-border-radius: 10em;
     -moz-border-radius: 10em;
     border-radius: 10em;

    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

input[type=search]:focus {
  width: 100%;
  background-color: #fff;
  border-color: #66cc75;


       -webkit-box-shadow: 0 0 5px rbga(109,207,246,.5);
       -moz-box-shadow: 0 0 5px rbga(109,207,246,.5);
       box-shadow: 0 0 5px rbga(109,207,246,.5);
}

input:-moz-placeholder {
  color: #999;
}
 

</style>

<form name="search" method="GET" action="<?php echo $_SERVER['PHP_SELF'] ?>?pesquisar=">
<input type="buscar" name="pesquisar" onclick="on"  type="text" autocomplete="off"  x-webkit-speech="x-webkit-speech"  placeholder="O que deseja pesquisar" required="required" >
</form> 

   

[William Barreto 0]

Ola, amigo.

Para isso funcionar, será necessário usar requisição em ajax, então precisamos ter o jQuery instalado. Vou estar te mostrando uma função interessante que será útil pra você estudar, e ela precisará também do ajaxForm.

Temos milhares de formas de fazer isso, essa aqui que vou te recomendar será apenas uma delas, poderá continuar estudando e fazer da forma que achar melhor !

Altere seu form para isso aqui (defina um novo arquivo para executar somente a busca e retornar os valores, o ajax não poderá executar numa página comum por que ele irá imprimir na tela a página dentro da página):

<form id="buscarForm" onsubmit="buscarBanco(this);return false;" method="GET" action="DEFINA O CAMINHO DO NOVO ARQUIVO.php">
	<input type="text" name="pesquisar" onkeypress="$('#buscarForm').submit();"  type="text" autocomplete="off"  x-webkit-speech="x-webkit-speech"  placeholder="O que deseja pesquisar" />
</form>

Seu código precisará de um lugar para receber os dados e imprimir na tela, não sei onde eles estão sendo exibidos, mas precisará ter um id para o seletor poder retornar pra ele durante a execução do ajax, então temos o seguinte:

 

<div id="retornoBancoBusca"></div>

 

Será também necessário incluir o jQuery e o ajaxForm, caso não tenha incluido ...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
<script src="http://malsup.github.com/jquery.form.js"></script> 

Agora só precisamos aplicar o método para executar o ajax e enviar ele para página, usando ajaxForm para isso, teremos o seguinte código:

function buscarBanco(form){
	$(form).ajaxSubmit({
		type: this.method,
		url: this.action,
		dataType: 'html',
		beforeSubmit: function(){
			$('#retornoBancoBusca').html('Buscando ...');
		}, success: function(retorno){
			$('#retornoBancoBusca').html(retorno);
		}, error: function(){
			$('#retornoBancoBusca').html('Erro ao buscar');
		}
	});
	$(form).ajaxStop(function(){
		window.opener.fechar();
		window.close();
	});
}

Nesse momento ele já estará chegando no PHP e executando a página com os dados da busca, ai vai depender do que tiver nessa página ai para poder encaminhar corretamente.