Array
(
    [0] => stdClass Object
        (
            [Votos_Balanceados] => 1
            [id] => 433956
            [titulo] => como fazer AutoComplete puxando do banco mysql ?
            [dataCadastro] => DateTime Object
                (
                    [date] => 2013-02-04 08:45:07
                    [timezone_type] => 3
                    [timezone] => America/Sao_Paulo
                )

            [isFirstPost] => -1
            [idUsuario] => 269142
            [status] => A
            [isExample] => 
            [NomeUsuario] => William 
            [Apelido] => William (Devwilliam)
            [Foto] => 269142_20150809195205.jpg
            [Conteudo] => 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:
[code]
<?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));
?>
[/code] ) )

como fazer AutoComplete puxando do banco mysql ?

PHP
Ari Lima
   - 03 fev 2013

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

Post mais votado

William (devwilliam)
   - 04 fev 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:
#Código

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

1
|
0

William (devwilliam)
   - 03 fev 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:
http://jqueryui.com/

2 - Escreva um arquivo em PHP, nesse exemplo vou retornar clientes do banco.

retornaCliente.php
#Código

<?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
#Código
<!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:
http://api.jqueryui.com/autocomplete/

Qualquer dúvida estamos por aí ...

0
|
0

Marcio Araujo
   - 04 fev 2013

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

obrigado

0
|
0

William (devwilliam)
   - 04 fev 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.

0
|
0

Luxu
   - 04 fev 2013

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

0
|
0

William (devwilliam)
   - 04 fev 2013

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

0
|
0

Luxu
   - 04 fev 2013

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

#Código

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
)

0
|
0

William (devwilliam)
   - 04 fev 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!

0
|
0

Luxu
   - 04 fev 2013


Citação:
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...

0
|
0

William (devwilliam)
   - 04 fev 2013

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

retornaLocalidade.php
#Código

<?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
#Código
<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
#Código
<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.

1
|
0

Ari Lima
   - 04 fev 2013

VLW GALERA OBRIGADO

0
|
0

Luxu
   - 04 fev 2013


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

retornaLocalidade.php
#Código

<?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
#Código
<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
#Código
<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?

0
|
0

Marcio Araujo
   - 06 fev 2013


Citação:
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

0
|
0

Luxu
   - 14 mai 2013

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

0
|
0

Marcio Araujo
   - 14 mai 2013


Citação:
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?

0
|
0

Luxu
   - 14 mai 2013

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

[strong]autoComplete.html[/strong]
#Código

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

#Código
<?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));
?>

0
|
0

Marcio Araujo
   - 15 mai 2013

obrigado

0
|
0

José
   - 10 out 2013

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

0
|
0