como fazer AutoComplete puxando do banco mysql ?

03/02/2013

37

PHP

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

Post mais votado

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

Mais Posts

03/02/2013

William

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

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

04/02/2013

William

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
fiz um teste na minha app e nd apresentou...pq serah?
Responder

04/02/2013

William

Luxu posta o código por favor, assim fica melhor para analisar.
Responder
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

04/02/2013

William

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

04/02/2013

William

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

04/02/2013

Ari Lima

VLW GALERA OBRIGADO
Responder
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

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
Consegui fazer funcionar galera, vendo o inspector do Chrome estava dando erro no chamado do PDO. vlw muito simples mesmo essa função.
Responder

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
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
×
+1 DevUP
Acesso diário, +1 DevUP
Parabéns, você está investindo na sua carreira