Auto Completar Tutorial: JavaScript, PHP e MySQL

Olá pessoALL!

Hoje o post é sobre Auto Completar.

Uso muito a biblioteca jQuery para JavaScript. Então neste pequeno tutorial será usado JavaScript (jQuery), PHP, MySQL e CSS.

Ao utilizar um Auto Completar em um campo de Busca, torna-se muito mais prático para o usuário encontrar o que deseja, pois ao digitar uma palavra, ou um pedeço dela, retornamos um conteúdo na qual a palavra digitada faz parte.

Começando pelo JavaScript:

function sugestoesMostra(busca) {
	if(busca.length == 0) {
		// Esconde as sugestões
		$('#sugestoes').hide();
	} else {
		$.post("http://www.xalexandre.com.br/buscaAuto/ajaxBusca.php", {queryString: ""+busca+""}, function(data){
			if(data.length >0) {
				$('#sugestoes').show();
				$('#sugestoesLista').html(data);
			}
		});
	}
} 

function sugestoesEnvia(thisValue) {
	$('#busca').val(thisValue);
	setTimeout("$('#sugestoes').hide();", 200);
}

Bom resumindo o js acima funciona da seguinte forma: na função sugestoesMostra, o primeiro if testa se os caracteres da variável busca é igual a zero, se for ele esconde a div sugestoes. Logicamente, pois se o usuário não digitou nada, não precisamos mostrar a caixa de sugestões.

Se este if for falso, entraremos no else, aí chamamos o script ajaxBusca.php, passando pra queryString o conteúdo da busca, em seguida é feito outro teste, relacionado ao ajaxBusca, para saber se o resultado da query retornada é maior que zero, se for irá mostrar os resultados em lista.

Na função sugestoesEnvia, apenas enviamos o valor retornado da lista para o campo de pesquisa.

Agora passamos ao PHP, o arquivo já foi mencionado: ajaxBusca.php

<?php		
	// Verifica se foi enviado uma string na busca.
	if(isset($_POST['queryString'])) {
			
		/*	Muito provavelmente você possui um arquivo com os 
			dados que faz a conexão com o banco. Caso tenha 
			apenas chame o arquivo aqui dentro, por exemplo:
			require("conexao.php");
			
			Abaixo um exemplo para conexão.
		*/
		$host = "localhost";		
		$usr = "USUARIO";		
		$pwd = "SENHA";		
		$bd = "BANCO";
		
		//Conexão BD
		mysql_connect("$host","$usr","$pwd") or die
		("ERRO: Não foi possível conectar ao BD.");
		mysql_select_db("$bd") or die 
		("ERRO: Não foi possível abrir o BD.");
		
		$queryString = ($_POST['queryString']);
		
		// Verifica se quantidade de caracteres é maior que zero.
		if(strlen($queryString) >0) {
			
			/*	Caso a quantidade de caracteres for maior que zero, 
				entraremos aqui, onde é executado o SQL.
			*/
			$query = mysql_query("select CAMPO from TABELA 
			where CAMPO like '%$queryString%' limit 20");
			/*	Bom, referente ao SQL acima, altere o CAMPO e a 
				TABELA para o seu caso.
				Note que a $queryString é passada com porcentagem 
				(%), com isso caso o usuário digite aba retornaremos 
				"abacate, abacaxi", se estiver em nossa tabela é claro.
			*/	
			if($query) {
				// Se a query for executada corretamente, entraremos 
				nesta linha abaixo, onde é feito um laço de repetição, 
				atribuindo os valores a variável $result.
				while ($result = mysql_fetch_array($query)) {
					/*	Abaixo mostraremos o resultado em lista, 
						novamente altere onde diz CAMPO para o campo 
						de sua tabela.
					*/
					echo '<li> onClick="sugestoesRecebe(\''.htmlentities($result[CAMPO]).'\');">'.htmlentities($result[CAMPO]).'</li>';
					/*
						No onClick uma função: sugestoesRecebe, na qual 
						mencionei anteriormente que serve para atribuir 
						o resultado ao campo texto.
					*/
				}
			} else {
				echo 'ERRO: Ocorreu um problema com a consulta.';
			}
		} 
	} else {
		echo 'Não é permitido acesso direto a esse script.';
	}
?>

Bom, o código acima está todo comentado, mas se surgir alguma dúvida deixe um comentário.

Passando para o CSS:

<style>
	.sugestoes {
		position: relative;
		left: 30px;
		margin: 10px 0px 0px 0px;
		width: 200px;
		background-color: #212427;
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
		border: 2px solid #000000;	
		color: #FFFFFF;
	}
	
	.sugestoesLista {
		margin: 0px;
		padding: 0px;
	}
	
	.sugestoesLista li {
		
		margin: 0px 0px 3px 0px;
		padding: 3px;
		cursor: pointer;
	}
	
	.sugestoesLista li:hover {
		background-color: #659CD8;
	}
</style>

E por fim o HTML:

<form id="formBusca" method="post" action="">
	<input name="busca" id="busca" size="25" type="text" onkeyup="sugestoesMostra(this.value);" onblur="sugestoesEnvia();" />
	<div class="sugestoes" id="sugestoes" style="display: none;">
		<img src="http://www.xalexandre.com.br/buscaAuto/flechaCima.png" style="position: relative; top: -12px; left: 30px;" alt="fecha Cima" />
		<div class="sugestoesLista" id="sugestoesLista">
			&nbsp;
		</div>
	</div>
</form>

Isso é tudo pessoALL! Um exemplo pode ser encontrado aqui no site, no canto superior direito. Dúvidas, críticas ou sugestões? Deixe um comentário.

[]‘s