Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS

Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17248
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Base autocomplete JSON jQuery MySQL

02-04-2010 17:41

Script base para auto completar os campos de um formulário, com base no nome passado, é feito uma consulta ao banco de dados, retornando os dados relativos aquele nome.

Para quem deseja a versão desse script sem banco de dados, acesse
http://www.codigosnaweb.com/forum/Base- ... _4972.html

Necessário a biblioteca jQuery

<script src="jquery.js"></script> <script> $(document).ready(function() { $("#nome").blur(function() {   // atribuimos o nome a var var nome=$("#nome").attr("value");   // carregamos o JSON passando o nome $.getJSON("dados.php", {name:nome}, function(json){   // pegamos o id obtido na página acima e passamos para o input $("#id").val(json[0].id);   // pegamos o sobrenome obtido na página acima e passamos para o input $("#sobrenome").val(json[0].sobrenome); });   }); }); </script>


<form action="" method="POST"> coloque o nome: <input type="text" id="nome" name="nome" value=""><br> id: <input type="text" id="id" name="id" value=""><br> sobrenome: <input type="text" id="sobrenome" name="sobrenome" value=""><br> </form>

Note no script acima que iremos pegar 2 informações: id e sobrenome

Agora vem o dados.php, que será a consulta que irá retornar os dados para os inputs de acordo com o nome passado

<?php // dados da conexão $conexao = mysql_connect("localhost", "login", "senha") or die(mysql_error()); $db = mysql_select_db("bd"); extract($_GET); // dados da consulta // OBSERVE QUE A CONSULTA SE BASEIA NO NOME PASSADO // PORTANTO, FAÇA A CONSULTA DE ACORDO COM SUA TABELA // $name, NÃO DEVE SER ALTERADO, VEM DO FORMULÁRIO $selec = "SELECT * FROM suatabela WHERE nome='$name'"; $exec = mysql_query($selec, $conexao) or die(mysql_error()); while($campos=mysql_fetch_array($exec)) { extract($campos); $Array = Array(); // ESSA PARTE É IMPORTANTE // CRIAMOS OS ÍNDICES id, COM O ID DA TABELA E SOBRENOME, TAMBÉM DA TABELA // USE DADOS RELATIVOS AOS QUE PRECISA // NOTE QUE id E sobrenome É USADO NO JS PARA OBTER OS DADOS, SOMENTE ALTERE OS $variavel... $Array[] = Array("id" => "$id", "sobrenome" => "$sobrenome"); $json_encode = json_encode($Array); echo $json_encode; } mysql_close($conexao); ?>

0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:
 
Mais de 75 postagens
Mais de 75 postagens
Mensagens: 75

Base autocomplete JSON jQuery MySQL

02-04-2010 18:45

Ótimo script, parabéns web
0
 
Mais de 75 postagens
Mais de 75 postagens
Mensagens: 75

Base autocomplete JSON jQuery MySQL

02-04-2010 18:59

Ficaria muito mais legal o script se quando o usuário fosse digitando o nome criasse uma lista das letras do nome digitado pelo usuário.

Tentei fazer isso, até que aparece a lista, no entanto, quando clico no nome que eu estava buscando a função que você fez em PHP () busca apenas as letras digitadas e não o nome clicado.

Então gostaria de saber se você sabe como resolver esse pro..

Codigo em HTML com os input's

<html> <head> <title>Suggest</title> <link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" /> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.bgiframe.min.js"></script> <script type="text/javascript" src="jquery.ajaxQueue.js"></script> <script type="text/javascript" src="thickbox-compressed.js"></script> <script type="text/javascript" src="jquery.autocomplete.js"></script> <script type="text/javascript" src="localdata.js"></script> <script type="text/javascript"> $(document).ready(function() {   $("#nome").autocomplete("busca-nome.php", { width: 180, selectFirst: true });   $("#nome").change(function() {   // atribuimos o nome a var var nome=$("#nome").attr("value");   // carregamos o JSON passando o nome $.getJSON("funcao-complete.php", {name:nome}, function(json){   // pegamos o id $("#id").val(json[0].id);   // pegamos o sobrenome $("#cpf").val(json[0].cpf);   // pegamos a profissao $("#profissao").val(json[0].profissao);   // pegamos a peso $("#peso").val(json[0].peso);   // pegamos a altura $("#altura").val(json[0].altura);   // pegamos a endereco $("#endereco").val(json[0].endereco);     });   }); }); </script> <!-- http://forum.imasters.uol.com.br/index.php?/topic/300778-resolvido-pegar-valor-da-url/ http://www.andafter.org/publicacoes/pegar-valor-de-uma-url-com-javascript_598.html --> <body>         <form action="" method="post">                 <fieldset>                         <label>Vá digitando: <input type="text" name="nome" id="nome" /></label>                         <input type="hidden" name="id" id="id" /><br>                         <!-- Nome: <input type="text" name="sobrenome" id="sobrenome" /><br> -->                         CPF: <input type="text" name="cpf"  id="cpf"/><br>                         Profissao: <input type="text" name="profissao" id="profissao" /><br>                         Peso: <input type="text" name="peso" id="peso" /><br>                         Altura: <input type="text" name="altura" id="altura" /><br>                         Endereço: <input type="text" name="endereco" id="endereco" /><br>                 </fieldset>         </form> </body> </html>

A função em PHP que uso para criar a lista
<?php     require_once "conexao.php";     $q = strtolower($_GET["q"]);     if (!$q) return;     $sql       = "SELECT id, nome FROM cliente WHERE nome LIKE '%". $q ."%'";     $resultado = mysql_query($sql) or die ("ERRO: ". mysql_error());     while ($linha = mysql_fetch_array($resultado))     {         if (strpos(strtolower($linha['nome']), $q) !== false)         {             $id = $linha['id'];             $nome = $linha['nome'];                         echo $nome ."|". $id. "\n";          }     } ?>

Aqui neste link está o script completo -->> http://www.mediafire.com/?m2omou3tihy <<--
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17248
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Base autocomplete JSON jQuery MySQL

02-04-2010 20:25

Com base no script original que postei, veja as mudanças para mostrar a lista

No documento pai, logo após

$(document).ready(function() {

coloque o seguinte

$("#nome").keyup(function() { document.getElementById('lista').style.display="block"; $("span#lista").load("dados.php?lista="+$("#nome").attr("value").replace(" ", "-")); }); function acao(nome) { document.getElementById('nome').value=nome; document.getElementById('lista').style.display="none"; document.getElementById('nome').focus(); document.getElementById('nome').blur(); }

O arquivo dados.php passa a conter o seguinte:

$conexao = mysql_connect("localhost", "login", "senha") or die(mysql_error()); $db = mysql_select_db("bd"); extract($_GET); if($_GET['lista']) { extract($_GET); $selec = "SELECT * FROM suatabela WHERE REPLACE(campodonome, ' ', '-') LIKE '$lista%'"; $exec = mysql_query($selec, $conexao) or die(mysql_error()); while($campos=mysql_fetch_array($exec)) { extract($campos); echo "<a href=\"javascript://\" onclick=\"javascript:acao('$campodonome')\">$campodonome</a><br>"; } } if($_GET['name']) { extract($_GET); $selec = "SELECT * FROM suatabela WHERE campodonome='$name'"; $exec = mysql_query($selec, $conexao) or die(mysql_error()); while($campos=mysql_fetch_array($exec)) { extract($campos); $Array = Array(); $Array[] = Array("id" => "$id", "sobrenome" => "$campodonome"); $json_encode = json_encode($Array); echo $json_encode; } } mysql_close($conexao); 

0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:
 
Mais de 75 postagens
Mais de 75 postagens
Mensagens: 75

Base autocomplete JSON jQuery MySQL

02-04-2010 22:33

Dá o seguinte erro abaixo quando clico no campo "nome" que é o que irei fazer a busca. E também a lista não é criada, acredito que devido ao erro.

document.getElementById("lista") is null [Break on this error] document.getElementById('lista').style.display="block";

Uma dúvida talvez meio boba, a estrutura de onde fica os input ficará da seguinte forma abaixo:

<script type="text/javascript"> $(document).ready(function() {           $("#nome").blur(function()         {                 document.getElementById('lista').style.display="block";                 $("span#lista").load("funcao-complete.php?lista="+$("#nome").attr("value").replace(" ", "-"));         });           function acao(nome)         {                 document.getElementById('nome').value=nome;                 document.getElementById('lista').style.display="none";                 document.getElementById('nome').focus();                 document.getElementById('nome').blur();         }           $("#nome").change(function()         {                   // atribuimos o nome a var                 var nome=$("#nome").attr("value");                   // carregamos o JSON passando o nome                 $.getJSON("funcao-complete.php", {name:nome}, function(json){                   // pegamos o id                 $("#id").val(json[0].id);                   // pegamos o cpf                 $("#cpf").val(json[0].cpf);                   // pegamos a profissao                 $("#profissao").val(json[0].profissao);           });   }); }); </script>

0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17248
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Base autocomplete JSON jQuery MySQL

02-04-2010 22:40

Esqueci uma coisa importante :-P O span, que recebe os dados da lista de opções

Coloca logo abaixo do input nome:

<span id="lista"></span>

Personaliza ele como desejar

Quanto a colocação do JavaScript adicional que coloquei, o original começa assim

$(document).ready(function() { $("#nome").blur(function() { ...  

Com esse trecho que coloquei adicional vai ficar assim

$(document).ready(function() { // o trecho aqui $("#nome").blur(function() { ... continua o que está no original

0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:
 
Mais de 75 postagens
Mais de 75 postagens
Mensagens: 75

Base autocomplete JSON jQuery MySQL

02-04-2010 23:07

A lista agora está sendo criada, mais quando clico nele para preencher os input's dá o seguinte erro abaixo:

acao IS NOT defined

O corpo de minha pagina de teste está assim

<html> <head> <title>Suggest</title> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function() {           $("#nome").keyup(function()         {                 document.getElementById('lista').style.display="block";                 $("span#lista").load("funcao-complete.php?lista="+$("#nome").attr("value").replace(" ", "-"));         });           function acao(nome)         {                 document.getElementById('nome').value=nome;                 document.getElementById('lista').style.display="none";                 document.getElementById('nome').focus();                 document.getElementById('nome').blur();         }           $("#nome").blur(function()         {                   // atribuimos o nome a var                 var nome=$("#nome").attr("value");                   // carregamos o JSON passando o nome                 $.getJSON("funcao-complete.php", {name:nome}, function(json)                 {                           // pegamos o id                         $("#id").val(json[0].id);                           // pegamos o cpf                         $("#cpf").val(json[0].cpf);                           // pegamos a profissao                         $("#profissao").val(json[0].profissao);                           // pegamos a peso                         $("#peso").val(json[0].peso);                           // pegamos a altura                         $("#altura").val(json[0].altura);                           // pegamos a endereco                         $("#endereco").val(json[0].endereco);                   });           }); }); </script> <!-- http://forum.imasters.uol.com.br/index.php?/topic/300778-resolvido-pegar-valor-da-url/ http://www.andafter.org/publicacoes/pegar-valor-de-uma-url-com-javascript_598.html --> <body>         <form action="" method="post">                 <fieldset>                         <input type="hidden" name="id" id="id" /><br>                         Nome: <input type="text" name="nome" id="nome" /><span id="lista"></span><br>                         CPF: <input type="text" name="cpf"  id="cpf"/><br>                         Profissao: <input type="text" name="profissao" id="profissao" /><br>                         Peso: <input type="text" name="peso" id="peso" /><br>                         Altura: <input type="text" name="altura" id="altura" /><br>                         Endereço: <input type="text" name="endereco" id="endereco" /><br>                 </fieldset>         </form> </body> </html>

Estou errando, ou o script está com erro ?!
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17248
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Base autocomplete JSON jQuery MySQL

02-04-2010 23:12

Toda a parte em JavaScript do arquivo principal, é essa

<script> function acao(nome) { document.getElementById('nome').value=nome; document.getElementById('lista').style.display="none"; document.getElementById('nome').focus(); document.getElementById('nome').blur(); } $(document).ready(function() { $("#nome").keyup(function() { document.getElementById('lista').style.display="block"; $("span#lista").load("dados.php?lista="+$("#nome").attr("value").replace(" ", "-")); }); $("#nome").blur(function() { // atribuimos o nome a var var nome=$("#nome").attr("value"); // carregamos o JSON passando o nome $.getJSON("dados.php", {name:nome}, function(json){ // pegamos o id obtido na página acima e passamos para o input $("#id").val(json[0].id); // pegamos o sobrenome obtido na página acima e passamos para o input $("#sobrenome").val(json[0].sobrenome); }); }); }); </script>

Altera ai os valores para o que precisa, nome do arquivo e variáveis
0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:
 
Mais de 75 postagens
Mais de 75 postagens
Mensagens: 75

Base autocomplete JSON jQuery MySQL

02-04-2010 23:22

Opaa agora deu certo :D estava dando erro eu está colocando a seguinte parte do codigo abaixo dentro do $(document).ready(function() {

function acao(nome) {         document.getElementById('nome').value=nome;         document.getElementById('lista').style.display="none";         document.getElementById('nome').focus();         document.getElementById('nome').blur(); }

Obrigadão ai web ajudou não somente a mim, como tenho certeza várias outras pessoa!
Muito obrigado.
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17248
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Base autocomplete JSON jQuery MySQL

02-04-2010 23:55

Blz :y:
0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:
 
Mais de 75 postagens
Mais de 75 postagens
Mensagens: 75

Base autocomplete JSON jQuery MySQL

03-04-2010 00:52

Olá web, olha eu aqui novamente :P

Estou tendo problemas para selecionar automaticamente campos do tipo radio, como por exemplo, selecionar o sexo.

No codigo jSon deixo da seguinte forma abaixo

$("#sexo").val(json[0].sexo);

E no input faço o seguinte:

<label><input name="sexo" type="radio" id="sexo" value="M" <?php if (isset($_POST['sexo']) && $_POST['sexo'] == "M") { echo "checked='checked'";}?> disabled="true"/><div id="sobre-campo">Masculino</div></label>        <label><input type="radio" name="sexo" id="sexo" value="F" <?php if (isset($_POST['sexo']) && $_POST['sexo'] == "F") { echo "checked='checked'";}?> disabled="true"/><div id="sobre-campo">Feminino</div></label>

Moral da história nada é selecionado, sabes me dizer o porque ?!
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17248
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Base autocomplete JSON jQuery MySQL

03-04-2010 13:11

No arquivo base, você vai adicionar esse bloco, para tratar o sexo

// obtendo o sexo var Valor = json[0].sexo; if(Valor=="m") { document.getElementById("Sm").checked="true"; } else { document.getElementById("Sf").checked="true"; }

Note que o valor a ser recebido é: m para masculino, caso contrário irá checkar o f, feminino

Os inputs radio são

sexo <input type="radio" name="sexo" id="Sm" value="m"> M <input type="radio" name="sexo" id="Sf" value="f"> F

Na consulta, você vai precisar do seguinte no while agora

$Array[] = Array("id" => "$id", "sobrenome" => "$lname", "sexo" => "$sexo"); 

0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:
 
Primeiras postagens
Primeiras postagens
Mensagens: 1
Sexo: Masculino

Re: Base autocomplete JSON jQuery MySQL

16-12-2016 18:36

Meu index.php ficou assim:

<script src="jquery.js"></script> <script> $(document).ready(function() { $("#serial").blur(function() { // atribuimos o nome a var var serial=$("#serial").attr("value"); // carregamos o JSON passando o nome $.getJSON("dados.php", {name:serial}, function(json){ // pegamos o id obtido na página acima e passamos para o input $("#certificado").val(json[0].certificado); // pegamos o sobrenome obtido na página acima e passamos para o input $("#sensibilidade").val(json[0].sensibilidade); }); }); }); </script> <form action="" method="POST"> Serial: <input type="text" id="serial" name="serial" value=""><br> Certificado: <input type="text" id="certificado" name="certificado" value=""><br> Sensibilidade: <input type="text" id="sensibilidade" name="sensibilidade" value=""><br> </form>

Meu dados.php ficou assim:

<?php // dados da conexão $conexao = mysql_connect("Localhost", "root", "") or die(mysql_error()); $db = mysql_select_db("databook"); extract($_GET); // dados da consulta // OBSERVE QUE A CONSULTA SE BASEIA NO NOME PASSADO // PORTANTO, FAÇA A CONSULTA DE ACORDO COM SUA TABELA // $name, NÃO DEVE SER ALTERADO, VEM DO FORMULÁRIO $selec = "SELECT * FROM piranometros WHERE serial='$name'"; $exec = mysql_query($selec, $conexao) or die(mysql_error()); while($campos=mysql_fetch_array($exec)) { extract($campos); $Array = Array(); // ESSA PARTE É IMPORTANTE // CRIAMOS OS ÍNDICES id, COM O ID DA TABELA E SOBRENOME, TAMBÉM DA TABELA // USE DADOS RELATIVOS AOS QUE PRECISA // NOTE QUE id E sobrenome É USADO NO JS PARA OBTER OS DADOS, SOMENTE ALTERE OS $variavel... $Array[] = Array("certificado" => "$certificado", "sensibilidade" => "$sensibilidade"); $json_encode = json_encode($Array); echo $json_encode; } mysql_close($conexao); ?>

Mas não funcionou. Pode me ajudar?
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17248
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Base autocomplete JSON jQuery MySQL

16-12-2016 19:12

Vou dar uma olhada e já respondo.
0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17248
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Base autocomplete JSON jQuery MySQL

16-12-2016 19:18

Fiz um teste aqui com seu código comentando toda a parte da consulta no arquivo dados.php. Veja como ficou:

<?php // dados da conexão //$conexao = mysql_connect("Localhost", "root", "") or die(mysql_error()); //$db = mysql_select_db("databook"); extract($_GET); // dados da consulta // OBSERVE QUE A CONSULTA SE BASEIA NO NOME PASSADO // PORTANTO, FAÇA A CONSULTA DE ACORDO COM SUA TABELA // $name, NÃO DEVE SER ALTERADO, VEM DO FORMULÁRIO //$selec = "SELECT * FROM piranometros WHERE serial='$name'"; //$exec = mysql_query($selec, $conexao) or die(mysql_error()); //while($campos=mysql_fetch_array($exec)) { //extract($campos); $Array = Array(); // ESSA PARTE É IMPORTANTE // CRIAMOS OS ÍNDICES id, COM O ID DA TABELA E SOBRENOME, TAMBÉM DA TABELA // USE DADOS RELATIVOS AOS QUE PRECISA // NOTE QUE id E sobrenome É USADO NO JS PARA OBTER OS DADOS, SOMENTE ALTERE OS $variavel... $Array[] = Array("certificado" => "1234", "sensibilidade" => "5678"); $json_encode = json_encode($Array); echo $json_encode; //} //mysql_close($conexao); ?>

O script funcionou corretamente. Ao preencher o serial retornou o certificado e sensibilidade.

Então esse erro deve estar na sua consulta MySQL.

Te aconselho o seguinte:

- Carrega o arquivo dados.php direto pelo link passando algum serial existente no seu banco de dados, tipo:

dados.php?serial=1234

Veja qual erro vai retornar e mostra aqui.
0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado