segunda-feira, 29 de agosto de 2016

Campo Autocompletar com jQuery e Ajax

Objetivo
Criar um campo que, a medida que o usuário digite, exiba as opções de preenchimento para que ele possa selecionar. No post vamos trabalhar com um campo de cidade onde que, ao buscar e selecionar uma cidade, nós iremos preencher o campo código e o campo sigla do estado. Utilizaremos uma requisição Ajax com Json para buscar e montar o vetor de dados.

Tecnologia aplicada:

Estrutura de arquivo
index.html => Arquivo principal com os campos de código de cidade, nome e sigla do estado. Nesse arquivo também terá a configuração do javascript.
busca.php => Arquivo responsável por comunicar com o banco e buscar as cidades cadastradas. Ele também monta o array de dados retornando no formato do Json.

Preparando
Vamos primeiro criar uma tabela cidade no banco de dados com 3 campos:
- codcidade: tipo inteiro e chave primária autoincremento;
- nome: tipo texto;
- estado: tipo caracter de 2 posições que guardará somente a sigla do estado a qual a cidade pertence.

Na tabela vamos cadastrar 9 cidades:
(Ipatinga/MG, Belo Horizonte/MG, Governador Valadares/MG, Rio de Janeiro/RJ, Volta Redonda/RJ, Petrópolis/RJ, São Paulo/SP, Santos/SP e Ribeirão Preto/SP)

Desenvolvimento
Arquivo: index.html
Nesse arquivo vamos criar 3 campos no body para exibir o código, nome e estado da cidade. Vamos configurar o ID dos campos como txtcodigo, txtcidade e txtestado respectivamente. A função autocompletar ficará configurada no campo de ID txtcidade. Segue o codigo:


Codigo:
  <input type="text" id="txtcodigo" name="txtcodigo" readonly /><br>
Cidade:
<input type="text" id="txtcidade" name="txtcidade" class="autocomplete" /><br>
Estado:
<input type="text" id="txtestado" name="txtestado" readonly />

Vamos agora configurar a requisição ajax para buscar os dados e configurar o campo txtcidade:

    <script type="text/javascript">
$(document).ready(function(){
$.ajax({ //requisição para buscar os dados
url : 'busca.php', //nome do script que fará a consulta
dataType: 'json', //tipo de requsição Ajax
success : function(data){ //função executada ao finalizar o processamento da requisição
$('#txtcidade').autocomplete({ //configura o campo de cidade com o autocomplete
source: data, //retorno da requisição Ajax
select: function( event, ui ) {// função ao selecionar uma opção do autocomplete
$('#txtcodigo').val(ui.item.codigo); //guarda o codigo no campo codigo  
$('#txtcidade').val(ui.item.nome); //guarda o nome da cidade no campo nome
$('#txtestado').val(ui.item.estado); //guarda o estado no campo estado
 }
});
},
});
});
</script>

Feito isso temos nosso arquivo pronto.

Arquivo: busca.php
Nesse arquivo vamos conectar ao banco e buscar as cidade cadastradas. Em seguida vamos montar um vetor com o resultado da consulta onde cada posição do vetor terá 4 posições:
codigo => guarda o codigo da cidade;
nome => guarda o nome da cidade;
estado => guarda o estado da cidade;
label => guarda o opção que aperecerá no autocompletar para o usuário. Para esse exemplo essa informação será a concatenação dos campos nome / estado.

Após o vetor montado, vamos retornar ele convertendo o mesmo para json. Nesse momento é importante verificar as codificações do arquivo e do banco pois qualquer problema de carácter resulta em um retorno de json NULO.

<?php

//Conexão com o banco de dados MySql
$servidor = 'localhost'; //endereço do servidor
$usuario_banco  = 'root'; //usuário de acesso ao banco
$senha_banco    = ''; //senha de acesso ao banco
$banco     = 'blog'; //nome do banco de dados
if($con = mysql_connect($servidor, $usuario_banco, $senha_banco)){
if(!mysql_select_db($banco, $con)){ //seleciona o banco que iremos trabalhar
//OBS: o "!" no inicio da proposição do IF nega o retorno da função. 
//Se a função retorna TRUE, que indica que a operação foi realizada com sucesso, ele não entra nesse IF.
//interrompe o processamento do script e exibe a mensagem caso não for possível selecionar o banco.
die("Erro: Não foi possível conectar ao banco de dados.");
}
}
else{
//interrompe o processamento do script e exibe a mensagem.
die("Erro: Não foi possível conectar ao banco de dados.");
}
//vetor para retornar o json
$dados = array();

//monta string de consulta
//vamos concatenar a sigla do estado ao nome da cidade para facilitar a escolha do usuário
$sql = "select codcidade, nome, estado, CONCAT(nome, '/', estado) as descricao from cidade order by nome, estado";
//executa a consulta
$consulta = mysql_query($sql);
//extrae os resultados
while($resultado = mysql_fetch_assoc($consulta)){
$dados[] = array("codigo" => $resultado['codcidade'], "nome" => utf8_encode($resultado['nome']), "estado" => $resultado['estado'], "label" => utf8_encode($resultado['descricao']));
}
echo json_encode($dados);

?>

Feito isso basta realizar testes.
Obrigado.
Até a próxima.



Nenhum comentário: