como fazer AutoComplete puxando do banco mysql ?

03/02/2013

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

PHP

Ari Lima

Melhor resposta

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

William (devwilliam)

Responder Citar

Outras Respostas

03/02/2013

William (devwilliam)

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í ...
Responder Citar

04/02/2013

Marcio Araujo

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

obrigado
Responder Citar

04/02/2013

William (devwilliam)

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.
Responder Citar

04/02/2013

Luxu

fiz um teste na minha app e nd apresentou...pq serah?
Responder Citar

04/02/2013

William (devwilliam)

Luxu posta o código por favor, assim fica melhor para analisar.
Responder Citar

04/02/2013

Luxu

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
)
Responder Citar

04/02/2013

William (devwilliam)

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!
Responder Citar

04/02/2013

Luxu

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...
Responder Citar

04/02/2013

William (devwilliam)

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.
Responder Citar

04/02/2013

Ari Lima

VLW GALERA OBRIGADO
Responder Citar

04/02/2013

Luxu

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?
Responder Citar

06/02/2013

Marcio Araujo

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
Responder Citar

14/05/2013

Luxu

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

14/05/2013

Marcio Araujo

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?
Responder Citar

14/05/2013

Luxu

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));
?>
Responder Citar