Tag Archive | JSON

Autocomplete do jQuery UI com PHP

Olá!!!

Bom… depois de muito suor, bateção de cabeça na minha mesa, muitos xingamentos ao meu computador (que não tinha nada a ver ‘coitado’…)… eu consegui implementar no meu sistema o autocomplete “bunitinho”, “lindinho” e “tchuco-tchuco” do jQuery UI!!!! \o/

Bom.. pra início de conversa, favor baixar aqui a versão mais recente do jQuery UI. Descompacta na sua pastinha de trabalho e mãos à obra.

Vamos precisar de dois arquivos: ‘formulario.php’ e ‘buscaDados.php’. O primeiro é onde estará o seu formulário que conterá seu campo autocomplete e o segundo, logicamente, é onde estará a pesquisa dos dados que retornarão para o autocomplete.

Antes de mais nada, em ‘formulario.php’ vamos fazer as chamadas para os arquivos .css e .js que vamos precisar para implementar o autocomplete. Todos se encontram no arquivo que você baixou e descompactou na pastinha de trabalho. No meu caso estou trabalhando com a versão 1.8.9 do jQuery UI que me trouxe a versão 1.4.4 do jQuery.

<script type="text/javascript" src="jquery-ui-1.8.9.custom/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.9.custom/js/jquery-ui-1.8.9.custom.min.js">
</script><link type="text/css" href="jquery-ui-1.8.9.custom/css/redmond/jquery-ui-1.8.9.custom.css" rel="stylesheet"/>

Só para lembrar, estas linhas são inseridas dentro das tag’s  <head>e </head>.  =)

Também no arquivo ‘formulario.php’, vamor criar um <form> </form> e dentro dele criar um textfield que vamos nomear de ‘auto’ para facilitar o processo:

<input type="text" id="auto" />

A propriedade ‘id’ do campo é o que permite a referenciação no jQuery. Agora vamos criar uma função ready para criar o campo autocomplete; esta função vem logo abaixo da referenciação dos arquivos .css e .js.

<script type="text/javascript">
  $(document).ready(function() 	{
    $('#auto').autocomplete(
    {
      source: "buscaDados.php",
      minLength: 2
    });
  });
</script>

Viu!? Estou dizendo que o campo ‘auto’ é um campo ‘autocomplete’ e que os dados virão do source ‘buscaDados.php’. Com a propriedade ‘minLength’ eu estou dizendo que o autocomplete será ativado quando eu tiver um mínimo de 2 caracteres digitados no meu campo ‘auto’.

E para finalizar, no arquivo ‘buscaDados.php’ você vai fazer a conexão com o banco de dados e retornar as informações da tabela que você quer:

$hostname = "localhost";
$user = "root";
$pass = "";
$basedados = "teste";
$connect = mysql_connect($hostname,$user,$pass) or die ("Impossível estabelecer conexão com o servidor de banco de dados");
mysql_select_db($basedados) or die ("Impossivel estabelecer conexão com o banco de dados");

//busca valor digitado no campo autocomplete "$_GET['term']
$text = mysql_real_escape_string($_GET['term']);
$query = "SELECT * FROM tabela WHERE campoTexto LIKE '%$text%' ORDER BY campoTexto ASC";
$result = mysql_query($query);
//formata o resultado para JSON
$json = '[';
$first = true;
while($row = mysql_fetch_array($result))
{
  if (!$first) { $json .=  ','; } else { $first = false; }
  $json .= '{"value":"'.utf8_encode($row['campoTexto']).'"}';
}
$json .= ']';

echo $json;

Então… é assim que se cria um campo autocomplete como o da imagem abaixo, que é um print de um pedaço do meu sistema:

Você pode formatar o autocomplete de várias formas, é possível personalizar um tema ou escolher um pré-existente para baixar aqui.

O exemplo que eu me guiei para conseguir aprender a usar esta funcionalidade foi o do burnmind.com que também disponibiliza o fonte para download e um demo. Obs.: o demo deles está configurado para que o autocomplete apareça a partir da 3ª letra digitada (experimente digitar “col”).

Espero ter ajudado! Qualquer coisa é só comentar aew…. =)

Até mais.

Anúncios
%d blogueiros gostam disto: