Estava desenvolvendo um sistema de busca para um cliente, que necessitava buscar seus produtos por referência, de imediato parecia ser fácil, logo veio alguns problemas: alguns produtos tinha referencia difícil de memorizar e vários produtos tinha quase a mesma referencia apenas um ou outro caractere que diferenciava. Pesquisei a melhor forma de solucionar o problema e encontrei o “AutoSuggest” vi alguns exemplos muito bons (complexos de aplicar) outros nem tanto, decidi criar e postar aqui vamos ao que interessa!!

Arquivos necessários
    http://xajaxproject.org/download.php

Indice

1. Criando o arquivo COMPLETAR.PHP
2. Criando o JavaScript
3. Criando o arquivo INDEX.PHP
4.  Considerações Finais
   

 
1 – Criando o Arquivo COMPLETAR.PHP

PHP
<?php
function autocompletar($formulario) {
// Iniciando a Classe
$objResponse = &new xajaxResponse('ISO-8859-1');
// Iniciando a Conexao
mysql_connect("localhost","root","");
mysql_select_db("autocompletar");
// Contador
$i = 0;
 
// Criando o SQL
$sqlBusca   = "SELECT * FROM tb_produto WHERE referencia LIKE '".$formulario["referencia"]."_%'  ";
// Executando o SQL
$queryBusca = mysql_query($sqlBusca);
// Quantidade de Registro
$check      = mysql_num_rows($queryBusca);
 
// Verificando se é diferente de Nulo
if($formulario["referencia"] != "") {
 
// Verifica se é maior que zero
if($check > 0) {
    		// Fazendo a listagem
   		while($list = mysql_fetch_array($queryBusca)) {
         			// Armazenando na variavel $opcao
        			$opcao .= "<div id=\"div_".$i."\">".$list["referencia"]."</div><br>";
        			// Incrementa o Contador
      			$i++;
  		}
} else {
       		// Mensagem de não encontrado
     		 $opcao = "Nenhuma Referencia encontrada...";
// Numero de Itens
$check = 0;
}
 
// Adicionando a DIV autocomplete
$objResponse->addAssign("autocomplete","innerHTML",$opcao);
// Armazenando o numero de Registros
$objResponse->addAssign("nItens","value",$check);
 
} else {
 
// Adicionando a DIV autocomplete
$objResponse->addClear("autocomplete","innerHTML");
// Armazenando o numero de Registros
$objResponse->addClear("nItens","value");	
}
 
// Retornando a Resposta
return $objResponse->getXML();
 
}
?>
www.revistaphp.com.br

2 – Criando o JavaScript

JavaScript
<script>
var POS = -1;
 
function setUpDown(palavra,valor,event) {
 
// Pegando o valor da Tecla
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
var nITEM   = document.getElementById("nItens").value; // Pegando o Numero de Itens da Busca
var ref     = document.getElementById("referencia");
 
// Declarando a Variavel Anterior
var ANT;
 
// Se a tecla pressionada for down arrow (Seta para baixo)
if(keyCode == 40) {
 
if(POS >= (nITEM-1)) {
		 POS = (nITEM-1);
	} else {
		 POS++;
	}
 
	// Seleciona a DIV
	document.getElementById("div_"+POS).style.background = "#000066";
	// Armazena a posição da DIV que será deselecionada
	ANT = eval(POS-1);
	// Se posição da DIV selecionada for diferente de -1 (Posição Inicial)
	if(ANT != -1) {
		// Deseleciona a DIV
		document.getElementById("div_"+ANT).style.background = "#FFFFFF";
	}
 
// Armazena o conteudo dela na variavel TEMP
	var TEMP = document.getElementById("div_"+POS).innerHTML;
	// Atribui o valor da TEMP ao campo REFERENCIA
	ref.value = TEMP;
 
	// Se a tecla pressionada for up arrow (Seta para cima)
	} else if(keyCode == 38) {
 
		if(POS <= 0) {
			POS = 0;
		} else {
			POS--;
		}
 
			// Seleciona a DIV
			document.getElementById("div_"+POS).style.background = "#000066";
			// Armazena a posição da DIV que será deselecionada
			ANT = eval(POS+1);
 
			// Deseleciona a DIV
			document.getElementById("div_"+ANT).style.background = "#FFFFFF";
			// Armazena o conteudo dela na variavel TEMP
			var TEMP = document.getElementById("div_"+POS).innerHTML;
			// Atribie o valor da TEMP ao campo REFERENCIA
			ref.value = TEMP;
 
		} else {
			// Executa a BUSCA
			xajax_autocompletar(palavra);
		}
}
</script>
www.revistaphp.com.br

3 – Criando o arquivo INDEX.PHP

PHP
<?php
// Incluindo o AJAX
require_once("xajax_0.2.4/xajax.inc.php");
require_once("completar.php");
 
// Iniciano a Classe
$xajax 	 = &new xajax();
 
// Registrando a Função
$xajax->registerFunction("autocompletar");
 
// Configurações exclusiva do AJAX
$xajax->decodeUTF8InputOn();
// Usando codificação ISO-8859-1
$xajax->setCharEncoding("ISO-8859-1");
$xajax->processRequests();
?>
<!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">
<head>
<?php $xajax->printJavascript("xajax_0.2.4/"); ?>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>:: Auto Completar - By Douglas Lira ::</title>
 
[ inserir o código javascript aqui!! ]
 
</head>
<body>
<form id="formulario" name="formulario" method="post">
<input type="hidden" name="tempPos" id="tempPos" />
<input type="hidden" name="nItens" id="nItens" />
 <input name="referencia" type="text" id="referencia" onkeyup="setUpDown(xajax.getFormValues('formulario'),this.value, event);" />
	<div id="autocomplete" style="width:150px;"></div>
</form>
</body>
</html>
www.revistaphp.com.br

4 – Considerações Finais

Bom, espero que gostem... esses código também encontra-se na sessão de CÓDIGOS / SCRIPTS do site.
É uma forma simples e fácil de aplicar, lógico que necessita de mais detalhes e um retoque final de Design, como é apenas para ensino deixei na forma “bruta” mesmo. Qualquer coisa estou on-line sempre no MSN e GTALK abraços!! =D