JQuery autocomplete em ajax com php e mysql
Olá!
Pessoal, desenvolvi um novo sistema de auto complete, na forma de um plugin JQuery, o Simple AutoComplete JQuery Plugin.
O Simple AutoComplete JQuery Plugin é mais fácil de integrar e resolve os BUGs que aconteciam no IE, na funcionalidade deste tutorial.
Você pode baixá-lo e ver a documentação em : http://blog.idealmind.com.br/projetos/simple-autocomplete-jquery-plugin/
Neste tutorial vou mostrar para você como fazer um autocomplete usando JQuery e AJAX, estilizado com css, e consultando banco de dados MySQL com PHP.
O resultado final será como a imagem abaixo:
Antes de tudo, baixe os arquivo necessários: http://blog.idealmind.com.br/exemplos/autocomplete/autocomplete.rar
Lá você encontra os arquivos javascript e css, e também o php, uma página de exemplo e as sqls.
Bom, depois de baixado, vamos ao primeiro passo, que será criar uma tabela no banco de dados, e inserir alguns dados.
Quero deixar um agradecimento e os créditos para o pessoal do webartz (http://www.webartz.com.br/mysql/banco-mysql-de-cidades-e-estados-do-brasil/), pois foi onde encontrei e baixei as sqls com os dados das cidades e estados do brasil.
Vamos criar uma tabela para o nosso exemplo, com os estados do Brasil:
CREATE TABLE `estados` ( `id` INTEGER UNSIGNED NOT NULL AUTO_INCREMENT, `sigla` VARCHAR(2) NOT NULL, `estado` VARCHAR(45) NOT NULL, PRIMARY KEY (`id`), INDEX `ix_estado`(`estado`) ) ENGINE = MyISAM CHARACTER SET utf8 COLLATE utf8_general_ci;
E agora vamos inserir os estados na tabela:
INSERT INTO `estados` (id, sigla, estado ) VALUES (1, 'AC', 'Acre'), (2, 'AL', 'Alagoas'), (3, 'AM', 'Amazonas'), (4, 'AP', 'Amapá'), (5, 'BA', 'Bahia'), (6, 'CE', 'Ceará'), (7, 'DF', 'Distrito Federal'), (8, 'ES', 'Espírito Santo'), (9, 'GO', 'Goiás'), (10, 'MA', 'Maranhão'), (11, 'MG', 'Minas Gerais'), (12, 'MS', 'Mato Grosso do Sul'), (13, 'MT', 'Mato Grosso'), (14, 'PA', 'Pará'), (15, 'PB', 'Paraíba'), (16, 'PE', 'Pernambuco'), (17, 'PI', 'Piauí'), (18, 'PR', 'Paraná'), (19, 'RJ', 'Rio de Janeiro'), (20, 'RN', 'Rio Grande do Norte'), (21, 'RO', 'Rondônia'), (22, 'RR', 'Roraima'), (23, 'RS', 'Rio Grande do Sul'), (24, 'SC', 'Santa Catarina'), (25, 'SE', 'Sergipe'), (26, 'SP', 'São Paulo'), (27, 'TO', 'Tocantins') ;
Agora vamos criar um arquivo HTML vazio:
<html> <head> </head> <body> </body> </html>
Agora, dentro da tag <head> vamos incluir os arquivos necessários:
<script type="text/javascript" src="js/autocomplete.js"></script> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <link rel="stylesheet" type="text/css" href="css/autocomplete.css">
Quero deixar claro que o arquivo autocomplete.js deve ser chamado antes da JQuery, por questões de compatibilidade.
Feito isso, vamos criar, dentro da tag <body> o campo input onde será digitado o texto e aparecerá o autocomplete:
<input type="text" name="campo_estado" id="campo_estado" />
Observe os valores dos atributos name e id: campo_estado. Estes valores serão a referência para a JQuery.
E agora vamos criar 3 campos, anda dentro da tag <body>, onde armazenaremos os dados referentes a opção que for selecionada no autocomplete:
<input type="text" id="id_val" name="id" value="" /><br /> <input type="text" id="estado_val" name="estado" value="" /><br /> <input type="text" id="sigla_val" name="sigla" value="" />
Observe que foi criado um campo para cada resultado da consulta que o autocomplete vai fazer via AJAX, PHP e MySQL.
Ok. Agora vamos para a parte do javascript, que fará tudo funcionar. O seguinte código deve ser inserido entre as tags <head></head>, depois da chamada dos arquivos js e css que foram incluídos.
<script type="text/javascript">
$(document).ready(function(){
// Aqui que tudo começa. Observe que usei o atributo name do campo que será digitado o texto como referência.
new Autocomplete("campo_estado", function() {
// Quando o autocomplete trazer o resultado da consulta, vai atribuir nos campos correspondentes
this.setValue = function( id, estado, sigla ) {
$("#id_val").val(id);
$("#estado_val").val(estado);
$("#sigla_val").val(sigla);
}
if ( this.isModified )
this.setValue("");
if ( this.value.length < 1 && this.isNotClick )
return ;
// O arquivo php abaixo é que será chamado via AJAX, sendo passado o parâmetro q com o valor digitado no campo
return "ajax.php?q=" + this.value;
});
});
</script>
Agora vamos criar o arquivo ajax.php, que receberá por GET o parâmetro q com o valor do texto que foi digitado no campo:
<?php
// Abaixo são definidas as variáveis de acesso ao banco de dados MySQL
$hostname = 'localhost';
$username = 'root';
$password = '';
$dbname = 'test';
// Abaixo o código de conexão ao banco
mysql_connect( $hostname, $username, $password ) or die ( 'Erro ao tentar conectar ao banco de dados.' );
mysql_select_db( $dbname );
// Na linha abaixo é dado um escape, para retirar caracteres que possam prejudicar a consulta sql
$q = mysql_real_escape_string( $_GET['q'] );
// Abaixo a sql que retornará os dados
$sql = "SELECT * FROM estados where locate('$q',estado) > 0 order by locate('$q',estado) limit 10";
// Abaixo executo a sql e atribuo o resultado da consulta à variável $res
$res = mysql_query( $sql );
// Para cada resultado encontrado, será gerada uma linha no autocomplete, colocando em negrito o termo digitado.
while( $campo = mysql_fetch_array( $res ) )
{
$id = $campo['id'];
$estado = $campo['estado'];
$sigla = $campo['sigla'];
$estado = addslashes($estado);
$html = preg_replace("/(" . $q . ")/i", "<span style=\"font-weight:bold\">\$1</span>", $estado);
// Veja que existe o atributo de evento onselect, que executará as funções de retorno no autocomplete
echo "<li onselect=\"this.setText('$estado').setValue('$id','$estado','$sigla');\">$html ($sigla)</li>\n";
}
?>
Bom, seguindo esses passos, você poderá incluir uma funcionalidade de autocomplete poderosa em seu site. Agora basta personalizar e estilizar ao seu gosto!
Deixe seu comentário!
