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.

	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 '
 onClick="sugestoesRecebe(\''.htmlentities($result[CAMPO]).'\');">'.htmlentities($result[CAMPO]).'
';
	         			/*
	         				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:

E por fim o HTML:

Isso é tudo pessoALL, um exemplo pode ser encontrado aqui no site, no canto superior direito. Dúvidas/críticas/sugestões deixe um comentários.
[]'s