como fazer AutoComplete puxando do banco mysql ?

PHP

03/02/2013

Como fazer input autocomplete puxando os dados do banco de dados ?
Ari Lima

Ari Lima

Curtidas 1

Melhor post

William

William

04/02/2013

Colega só uma correção, por questões de otimização.

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));
 ?>
GOSTEI 3

Mais Respostas

William

William

03/02/2013

Olá Ari!

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í ...
GOSTEI 1
Marcio Araujo

Marcio Araujo

03/02/2013

me metendo aqui no assunto, esse autocomplete seria pegar direto do banco? ou ele faz tipo uma copia dos dados para apresentar?

obrigado
GOSTEI 0
William

William

03/02/2013

Olá Marcio!

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.
GOSTEI 0
Luciano Martins

Luciano Martins

03/02/2013

fiz um teste na minha app e nd apresentou...pq serah?
GOSTEI 0
William

William

03/02/2013

Luxu posta o código por favor, assim fica melhor para analisar.
GOSTEI 0
Luciano Martins

Luciano Martins

03/02/2013

o código é o mesmo só muda a base de dados que estou usando a minha com os seguintes campos:

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
)
GOSTEI 0
William

William

03/02/2013

1 - A configuração de conexão com o banco está correta?

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!
GOSTEI 0
Luciano Martins

Luciano Martins

03/02/2013

1 - a configuração de conexão com o banco está correta?

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...
GOSTEI 0
William

William

03/02/2013

Vamos supor que vc queira autocompletar o campo Localidade da sua tabela, vou postar somente o código básico:

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.
GOSTEI 1
Ari Lima

Ari Lima

03/02/2013

VLW GALERA OBRIGADO
GOSTEI 0
Luciano Martins

Luciano Martins

03/02/2013

Vamos supor que vc queira autocompletar o campo Localidade da sua tabela, vou postar somente o código básico:

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?
GOSTEI 0
Marcio Araujo

Marcio Araujo

03/02/2013

Olá Marcio!

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
GOSTEI 0
Luciano Martins

Luciano Martins

03/02/2013

Consegui fazer funcionar galera, vendo o inspector do Chrome estava dando erro no chamado do PDO. vlw muito simples mesmo essa função.
GOSTEI 0
Marcio Araujo

Marcio Araujo

03/02/2013

Consegui fazer funcionar galera, vendo o inspector do Chrome estava dando erro no chamado do PDO. vlw muito simples mesmo essa função.


pode postar seu codigo?
GOSTEI 0
Luciano Martins

Luciano Martins

03/02/2013

Estou postando como está meu código funcionando tanto localmente (via WAMPSERVER) como hospedado na net, ok?

[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));
?>
GOSTEI 1
Marcio Araujo

Marcio Araujo

03/02/2013

obrigado
GOSTEI 0
José

José

03/02/2013

Olá amigos, como a duvida inicial foi sanada. Estou finalizando o tópico.
GOSTEI 0
POSTAR