Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Aqui vai uma demonstração de uma consulta que a medida que você digita ela tras os resultados do banco de dados instantaneamente:
Para ver funcionando CLIQUE AQUI.
Segue o código:
Esse é o código onde você irá digitar o que quer buscar
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>//função para pegar o objeto ajax do navegador
function xmlhttp()
{
// XMLHttpRequest para firefox e outros navegadores
if (window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
// ActiveXObject para navegadores microsoft
var versao = ['Microsoft.XMLHttp', 'Msxml2.XMLHttp', 'Msxml2.XMLHttp.6.0', 'Msxml2.XMLHttp.5.0', 'Msxml2.XMLHttp.4.0', 'Msxml2.XMLHttp.3.0','Msxml2.DOMDocument.3.0'];
for (var i = 0; i < versao.length; i++)
{
try
{
return new ActiveXObject(versao[i]);
}
catch(e)
{
alert("Seu navegador não possui recursos para o uso do AJAX!");
}
} // fecha for
return null;//função para fazer a requisição da página que efetuará a consulta no DB
function carregar()
{
a = document.getElementById('busca').value;
ajax = xmlhttp();
if (ajax)
{
ajax.open('get','busca.php?busca='+a, true);
ajax.onreadystatechange = trazconteudo;
ajax.send(null);
}
}//função para incluir o conteúdo na pagina
function trazconteudo()
{
if (ajax.readyState==4)
{
if (ajax.status==200)
{
document.getElementById('resultados').innerHTML = ajax.responseText;
}
}
}
</script>
</head>
<body>
<form id="form1" action="" method="post">
Busca: <input type="text" name="busca" id="busca" value="" onkeyUp="carregar()"/>
</form>
<p> </p><div id="resultados" style="border:1px solid #CCCCCC; width:200px;">
</div>
</body>
</html>Esse é o código que efetuará a consulta na base de dados:
Salve como busca.php
<?php
mysql_connect("localhost","root","");
mysql_select_db("pesquisa");
$busca = $_GET['busca'];
if($busca != "") {
$sql = "SELECT * FROM cadastros WHERE cadastro LIKE '%$busca%' ORDER BY cadastro ASC ";
$query = mysql_query($sql);
//variavel para zebrar as linhas
$cont = 0;
while($row = mysql_fetch_object($query)) {
//faz a diferenciação das cores para as linhas dos resultados
if($cont %2 ==0) {
$cor = "#EDEDED";
} else {
$cor = "#FFFFFF";
}
echo "<div style='background:$cor'>";
echo $row->idcadastro. " - ";
echo $row->cadastro."<br>";
echo "</div>";
$cont ++;
}
}
?>Segue o código de uma base de dados para teste.
Crie um banco de dados com o nome de pesquisa;
CREATE TABLE `cadastros` (
`idcadastro` int(5) NOT NULL auto_increment,
`cadastro` varchar(100) NOT NULL,
PRIMARY KEY (`idcadastro`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=29 ;--
-- Extraindo dados da tabela cadastros
--
INSERT INTO cadastros (idcadastro, cadastro) VALUES
(1, 'Vectra'),
(2, 'Fusca'),
(3, 'vectra cd'),
(4, 'astra'),
(5, 'ogi'),
(6, 'gol 1.8'),
(7, 'Fiat uno'),
(8, 'Fiat elba'),
(9, 'S10'),
(10, 'F250'),
(11, 'golf'),
(12, 'golf gti'),
(13, 'gol gti'),
(14, 'corsa'),
(15, 'Kombi'),
(16, 'Wariant'),
(17, 'Celta'),
(18, 'corsa sedan'),
(19, 'Monza'),
(20, 'Honda'),
(21, 'Honda civic'),
(22, 'Punto'),
(23, 'Fiat tipo'),
(24, 'Stilo'),
(25, 'Caravan'),
(26, 'Opala'),
(27, 'Omega CD'),
(28, 'Omega');
Atenciosamente,
Edimilson sousa Quelipe.
At+
Carregando comentários...