como fazer AutoComplete puxando do banco mysql ?
03/02/2013
0
Ari Lima
Post mais votado
04/02/2013
Se o autocomplete é somente para o nome do cliente então não existe a necessidade de sobrecarregar a consulta com todos os campos (SELECT * FROM cliente), seria mais performático retornar só o nome do cliente, exemplo:
<?php $pdo = new PDO("mysql:host=localhost; dbname=db_sac; charset=utf8;", "root", "011224", $opcoes); $dados = $pdo->prepare("SELECT nome_cliente FROM cliente"); $dados->execute(); echo json_encode($dados->fetchAll(PDO::FETCH_ASSOC)); ?>
William
Mais Posts
03/02/2013
William
Vou passar para vc um exemplo básico em PHP que retorna os dados em JSON, esse dados serão convertidos em array com JQUERY na página do input.
Será utilizado um plugin JQUERY mais precisamente o AutoComplete do JQUERY UI.
1 - baixe o JQUERY UI nesse link:
[url]http://jqueryui.com/[/url]
2 - Escreva um arquivo em PHP, nesse exemplo vou retornar clientes do banco.
retornaCliente.php
<?php $pdo = new PDO("mysql:host=localhost; dbname=db_sac; charset=utf8;", "root", "011224", $opcoes); $dados = $pdo->prepare("SELECT * FROM cliente"); $dados->execute(); echo json_encode($dados->fetchAll(PDO::FETCH_ASSOC)); ?>
3 - Na página onde será usado o input com AutoComplete vc link o CSS, JQUERY e JQUERYUI. Escreve a instrução JQUERY que vai convertes os dados em array.
Cliente.php
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Auto Complete</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> <script src="javascript/jquery-1.8.3.js"></script> <script src="javascript/jquery-ui.js"></script> <script type="text/javascript"> $(document).ready(function() { // Captura o retorno do retornaCliente.php $.getJSON('retornaCliente.php', function(data){ var cliente = []; // Armazena na array capturando somente o nome do cliente $(data).each(function(key, value) { cliente.push(value.cliente); }); // Chamo o Auto complete do JQuery ui setando o id do input, array com os dados e o mínimo de caracteres para disparar o AutoComplete $('#txtCliente').autocomplete({ source: cliente, minLength: 3}); }); }); </script> </head> <body> <label>Cliente:</label> <input type="text" id="txtCliente" name="txtCliente" size="60"/> </body> </html>
Basicamente é isso, mas esse plugin disponibiliza várias configurações interessantes, vale a pena estudá-lo com mais calma. Existem vários componentes de interface disponibilizados pelo plugin JQUERY UI no site oficial v encontra uma gama de exemplos.
Segue o link da documentação do AutoComplete:
[url]http://api.jqueryui.com/autocomplete/[/url]
Qualquer dúvida estamos por aí ...
04/02/2013
Marcio Araujo
obrigado
04/02/2013
William
Sim, esse plugin apresenta os registros retornados a partir da instrução SQL, ele pode autocompletar internamente no input ou abrir uma janela abaixo do mesmo disponibilizando as opções conforme a digitação de caracteres no input.
04/02/2013
Luciano Martins
04/02/2013
William
04/02/2013
Luciano Martins
CREATE TABLE dummy ( `idValor` INT(11) NOT NULL AUTO_INCREMENT, `Localidade` VARCHAR(45) NOT NULL, `Tecnologia` VARCHAR(10) NOT NULL, `Conclusao` VARCHAR(45) NOT NULL, `Valor` DECIMAL(10,0) NOT NULL )
04/02/2013
William
2 - A instrução SQL está retornando registros?
3 - Na instrução JQuery vc está apontando para o arquivo PHP correto?
4 - No laço vc está atribuindo o campo correto (key, value)?
Não se esqueça q para disparar o evento tem q ser digitado no minimo 3 caracteres, como está configurado.
Coloca um alert() dentro das intruções para ir capturando os valores da variável!
04/02/2013
Luciano Martins
2 - a instrução sql está retornando registros?
3 - na instrução jquery vc está apontando para o arquivo php correto?
4 - no laço vc está atribuindo o campo correto (key, value)?
não se esqueça q para disparar o evento tem q ser digitado no minimo 3 caracteres, como está configurado.
coloca um alert() dentro das intruções para ir capturando os valores da variável!
Quais seriam a (key, value) baseados nos campos q te passei...
04/02/2013
William
retornaLocalidade.php
<?php $pdo = new PDO("mysql:host=localhost; dbname=dummy; charset=utf8;", "seu_usuário", "sua_senha"); $dados = $pdo->prepare("SELECT Localidade FROM dummy"); $dados->execute(); echo json_encode($dados->fetchAll(PDO::FETCH_ASSOC)); ?>
script JQuery
<script type="text/javascript"> $(document).ready(function() { // Captura o retorno do retornaCliente.php $.getJSON('retornaLocalidade.php', function(data){ var dados = []; // Armazena na array capturando somente o nome do cliente $(data).each(function(key, value) { dados.push(value.Localidade); }); // Chamo o Auto complete do JQuery ui setando o id do input, array com os dados e o mínimo de caracteres para disparar o AutoComplete $('#txtLocalidade').autocomplete({ source: dados, minLength: 3}); }); }); </script>
HTML
<body> <label>Localidade:</label> <input type="text" id="txtLocalidade" name="txtLocalidade" size="60"/> </body> </html>
Basta digitar no minimo 3 letras iniciais de localidades que estejam cadastradas no banco.
04/02/2013
Luciano Martins
retornaLocalidade.php
<?php $pdo = new PDO("mysql:host=localhost; dbname=dummy; charset=utf8;", "seu_usuário", "sua_senha"); $dados = $pdo->prepare("SELECT Localidade FROM dummy"); $dados->execute(); echo json_encode($dados->fetchAll(PDO::FETCH_ASSOC)); ?>
script JQuery
<script type="text/javascript"> $(document).ready(function() { // Captura o retorno do retornaCliente.php $.getJSON('retornaLocalidade.php', function(data){ var dados = []; // Armazena na array capturando somente o nome do cliente $(data).each(function(key, value) { dados.push(value.Localidade); }); // Chamo o Auto complete do JQuery ui setando o id do input, array com os dados e o mínimo de caracteres para disparar o AutoComplete $('#txtLocalidade').autocomplete({ source: dados, minLength: 3}); }); }); </script>
HTML
<body> <label>Localidade:</label> <input type="text" id="txtLocalidade" name="txtLocalidade" size="60"/> </body> </html>
Basta digitar no minimo 3 letras iniciais de localidades que estejam cadastradas no banco.
Nd..e investigando o Inspeionar Elemento num mostrar nd lá...como usar o alert?
06/02/2013
Marcio Araujo
Sim, esse plugin apresenta os registros retornados a partir da instrução SQL, ele pode autocompletar internamente no input ou abrir uma janela abaixo do mesmo disponibilizando as opções conforme a digitação de caracteres no input.
show de bola isso, deixa o sisteminha mais apresentavel.
vlw
14/05/2013
Luciano Martins
14/05/2013
Marcio Araujo
pode postar seu codigo?
14/05/2013
Luciano Martins
[strong]autoComplete.html[/strong]
<!DOCTYPE HTML> <html lang="pt-br"> <head> <meta charset="UTF-8"> <title>Teste Auto-Complete</title> <link type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> </head> <body> <label>Localidade:</label> <input type="text" id="txtLocalidade" name="txtLocalidade" size="60"/> </body> </html> <script type="text/javascript"> $(document).ready(function() { // Captura o retorno do retornaCliente.php $.getJSON('retornaLocalidade.php', function(data){ var dados = []; // Armazena na array capturando somente o nome do EC $(data).each(function(key, value) { dados.push(value.EC); }); // Chamo o Auto complete do JQuery ui setando o id do input, array com os dados e o mínimo de caracteres para disparar o AutoComplete $('#txtLocalidade').autocomplete({ source: dados, minLength: 3}); }); }); </script>
[strong]retornaLocalidade.php[/strong]
<?php $hostname = ""; $user = ""; $pass = ""; $basedados = ""; $pdo = new PDO("mysql:host=localhost; dbname=BDteste; charset=utf8;",'root','12345'); $dados = $pdo->prepare("SELECT EC FROM trampo"); $dados->execute(); echo json_encode($dados->fetchAll(PDO::FETCH_ASSOC)); ?>
Clique aqui para fazer login e interagir na Comunidade :)