Autocomplete em Input | jQueryUi + PHP

Hallo coders,

Neste post irei abordar um dos plugins do framework jQueryUI: o Autocomplete.
Na documentação é possível encontrar um exemplo bem simples e fácil de entender, porém no meu exemplo farei com que o valor do array do autocomplete seja populado com valores armazenados no banco de dados.

Neste exemplo utilizei um tabela Aluno com os campos id e nome.
Também optei por fazer o exemplo em php, por ser um exemplo básico no qual o foco é plugin e não a linguagem usada no back-end.

Bem, primeiramente precisamos de um input que será utilizado para a utilização do autocomplete:

   <label for="aluno">
	<span>Aluno</span>
	<input type="text" id="aluno" />
   </label>

Também precisamos de um arquivo javascript que será o responsável por capturar o que está sendo digitado no nosso input, fazer a requisição e retornar o valor para o mesmo input.
Neste arquivo faremos um chamada à função autocomplete do jQueryUI onde informamos onde ela fará a requisição:

$(document).ready(function(){
	$('#aluno').autocomplete(
    {
      source: "filtrar_aluno.php",
      minLength: 3
    });
});

Esta função é disparada no campo de id=”aluno” que definimos anteriormente.
Optei por setar o campo minLength para que a requisição seja feita somente quando forem preenchidos 3 ou mais caracteres.

E por último temos o nosso arquivo php que fará a conexão com o banco de dados e retornará o json para a função acima:

$nomeAluno = $_GET['term'];	
$query = "select id, nome from aluno where nome like '%".$nomeAluno."%' order by nome";

//Retorna uma nova conexão com o banco de dados	- Implementação própria
$PDO = App::newConnection();
$prepare = $PDO->prepare($query);
$prepare->execute();

$json = Array();
while ($aluno = $prepare->fetchObject()){
	array_push($json, Array("value" => $aluno->nome));
	}
echo json_encode($json);

Atente para o $_GET[‘term’], que é o parâmetro de requisição enviado via get pelo plugin. Assim, sempre que for implementar o autocomplete com requisições é obrigatório você manipular este parâmetro.

Dentro do while o array com os valores é preenchido e ao final da iteração é feita uma chamada à função json_encode() que retornará o nosso array em formato json que é utilizado pelo plugin para popular o nosso input.

Opcionalmente você pode retornar um array com atributo label e value dentro do while:

Array("label" => $aluno->nome, 
	"value" =>$aluno->id);

Assim o plugin exibe o campo nome e após selecionar preenche o input com o campo id.

_

Bem amigos, foi um exemplo bem básico, pois estou iniciando meus estudos com o jQuery e o jQueryUI e achei que seria um post interessante. Estou gostando bastante de aprender este framework que é bastante utilizado e muito fácil de usar (pelo menos tem sido até agora).

Qualquer dúvida é só perguntar.

Até a próxima! 😀

Anúncios

4 comentários em “Autocomplete em Input | jQueryUi + PHP”

  1. Ótimo e fácil seu post, parabéns!
    Mas o que eu queria que acontecesse é: Mostrar o nome, preencher o input com o nome, mas na hora de salvar, salvar o ID do nome. Sabe como? Estou usando o codeigniter, tbm sou iniciante nisso.

    1. Oi Nathan,
      No seu código PHP basta você acessar o atributo value do seu input nome utilizando algo do tipo $_POST['aluno'].
      Ou também poderia fazer o mesmo via jQuery: $("#aluno").val()
      Depois fala se funcionou.

      Abs e valeu!

  2. Henrique, me tira uma dúvida!?
    Eu fiz um formulário no qual ao um número qualquer, irá listar matrículas referente aqueles números (ex: 001 aí lista todos que tem 001). Mas eu preciso que ao listar e clicar na matrícula desejada, ele preencha todos os campos referente àquela matrícula.
    No caso, se eu usar seu código como exemplo, consigo fazer isso que eu preciso?

    Aguardo um retorno.

    1. Oi Inês, tudo bem?

      Me parece que no seu caso você tem duas estratégias a seguir fazendo algumas mudanças no exemplo do post:

      1) Na sua query de listagem você já pode trazer todas as informações da matrícula e deixar salvo na memória, assim quando o usuário clicar você preenche os campos com essas informações.
      Pros: Você só toca uma vez o banco de dados. Cons: Vai trazer muitas informações de uma só vez e terá mais joins.

      2) Recupere os dados de cada matrícula sempre que clicar nela.
      Pros: Abordagem mais simples e recupera os dados de cada matricula sob-demanda. Cons: Vai tocar o banco de dados sempre que selecionar uma nova matrícula.

      Faz sentido no seu caso? Espero ter ajudado. 🙂

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s