Autocomplete em input para cadastro de cliente
22/04/2016
0
Procurei no fórum e em vários lugares, mas não consigo desenvolver essa parte da aplicação de cadastro de usuário.
Nesse projeto preciso que o usuário que não saiba o CEP, pesquise-o pelo endereço no banco de dados.
<script type="text/javascript" src="jquery/jquery-1.12.3.min.js"></script> <script type="text/javascript" src="jquery/bootstrap.min.js"></script> <script type="text/javascript" src="jquery/jquery-ui.min.js"></script>
A busca pelo CEP está assim e funciona corretamente:
<script type="text/javascript"> //pegar o endereço com o cep $(document).ready(function(){ var cep; cache=false; $("#cep").blur(function(){//quando o usuario tirar o foco do campo executa essa função cep=$("#cep").val(); //recebe o valor do campo cep digitado pelo usuário //alert("valor CEP ."+ cep); getJSON $.get("//www.dominio.com.br/consulta_endereco.php?cep="+cep, function(data) { console.log(data); $("#endereco").val(data.endereco); $("#bairro").val(data.bairro); $("#cidade").val(data.cidade); $("#estado").val(data.estado); $("#cod_endereco").val(data.cod_endereco); $('#numero').focus(); }, "json");//fim do jSON }) }) </script>
Agora criei um item Não sei o Cep que abre uma janela modal, onde o cliente deve digitar o endereço:
<script type="text/javascript"> //abrir janela para pesquisa de endereço $(document).ready(function(){ $("a[rel=modal]").click( function(ev){ ev.preventDefault(); $('#endereco2res').val(''); var id = $(this).attr("href"); var alturaTela = $(document).height(); var larguraTela = $(window).width(); //colocando o fundo preto $('#mascara').css({'width':larguraTela,'height':alturaTela}); $('#mascara').fadeIn(1000); $('#mascara').fadeTo("slow",0.8); var left = ($(window).width() /2) - ( $(id).width() / 2 ); var top = ($(window).height() / 2) - ( $(id).height() / 2 ); $(id).css({'top':top,'left':left}); $(id).show(); }); $("#mascara").click( function(){ $(this).hide(); $(".window").hide(); }); $('.fechar').click(function(ev){ ev.preventDefault(); $("#mascara").hide(); $(".window").hide(); $('#endereco2res').val(''); }); }); </script>
Está funcionando perfeitamente até aí, mas preciso implementar a busca pelo endereço já previamente cadastrado no banco (integração com outro sistema da empresa) e não consegui fazer funcionar nenhum dos diversos scripts que encontrei na internet.
Já tentei com este:
[url:descricao=Autocomplete com jquery ui, php e mysql]http://www.devwilliam.com.br/php/autocomplete-com-jquery-ui-php-mysql[/url]
Mas a busca não funciona usando:
$.ajax({ url: "consulta.php", dataType: "json", data: { acao: 'autocomplete', parametro: $('#busca').val() }, success: function(data) { response(data); } });
Só como no exemplo do CEP.
[url:descricao=Com esse aqui do fórum]https://www.devmedia.com.br/forum/como-fazer-autocomplete-puxando-do-banco-mysql/433945[/url] e também nada...
Agradeço se alguém puder me dar uma luz
Andreia
Posts
22/04/2016
William
Possivelmente se você debugar no browser com F12, vai existir erros no console de javascript, é possível também verificar se o script PHP está retornando erros na requisição AJAX.
22/04/2016
Andreia
Se eu submeter o formulário traz corretamente o resultado dentro do que eu digitar, verifiquei via banco de dados.
Fiz esse teste no Firefox e no Chrome... Pode ser algo com o servidor? Pois ele fica no cliente mesmo.
Minha busca é simples mesmo não aprendi ainda usar PDO.
$campo= $_GET['campo']; //echo $campo."<br />"; $sql="SELECT tb_endereco.cep,tb_endereco.endereco, tb_endereco.cod_endereco, tb_tipo_endereco.descricao, tb_bairros.cod_bairro, tb_bairros.nome_bairro, tb_cidades.cod_cidade,tb_cidades.nome_cidade,tb_cidades.estado,tb_cidades.cep FROM tb_endereco INNER JOIN tb_tipo_endereco ON(tb_endereco.cod_tipo_end=tb_tipo_endereco.cod_tipo_endereco) INNER JOIN tb_cidades ON(tb_endereco.cod_cidade=tb_cidades.cod_cidade) INNER JOIN tb_bairros ON(tb_endereco.cod_bairro=tb_bairros.cod_bairro) WHERE tb_endereco.endereco like '%".$campo."%'"; //echo $sql."<br />"; $sql=mysql_query($sql) or die (mysql_error()); //echo mysql_num_rows($sql); while ($reg = mysql_fetch_array($sql,MYSQL_ASSOC)){ $row['endereco']=formatacao($reg["descricao"]. ' ' . $reg["endereco"]); $row['bairro']=formatacao($reg["nome_bairro"]); $row['cidade']=formatacao($reg["nome_cidade"]); $row['estado']=strtoupper($reg["estado"]); $row['cep']=$reg["cep"]); $row['cod_endereco']=$reg["cod_endereco"]; $row_set[] = $row;//build an array echo json_encode($row_set);
22/04/2016
William
22/04/2016
Andreia
console.log(data);
Quando digito não aparece nada, depois de um tempo apareceu, no console do Chrome:
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object…]
[0 … 9999]
[10000 … 19999]
[20000 … 29999]
[30000 … 38497]
length
:
38498
__proto__
:
Array[0]
22/04/2016
Andreia
22/04/2016
Andreia
Fiz um teste aqui e na janela normal funcionou o exemplo do jqueryui e na modal não...
Agora vou tentar fazer a aplicação buscando do banco... caso não dê certo, volto a incomodar
25/04/2016
Andreia
retirei a janela modal e estou usando o seguinte código agora:
$(document).ready(function(){ $(function() { /* // Atribui evento e função para limpeza dos campos $('#busca').on('input', limpaCampos);*/ // Dispara o Autocomplete a partir do segundo caracter $( "#tags" ).autocomplete({ minLength: 2, source: function( request, response ) { $.get("//consulta.php?acao=autocomplete&busca="+$('#busca').val(), function(data) { console.log(data); response(data); }, "json");//fim do jSON }, focus: function( event, ui ) { $("#busca").val( ui.item.titulo ); carregarDados(); return false; }, select: function( event, ui ) { $("#busca").val( ui.item.titulo ); return false; } }) .autocomplete( "instance" )._renderItem = function( ul, item ) { return $( "<li>" ) .append( "<a>" + item.endereco + " - " + item.bairro + " - " + item.cidade + " - " + item.estado + "</a><br>" ) .appendTo( ul ); };
E ao executar a consulta exibe o seguinte erro:
jquery-1.12.3.min.js:4 GET http://consulta.php/?acao=autocomplete&busca=ameri net::ERR_NAME_NOT_RESOLVED
send @ jquery-1.12.3.min.js:4
n.extend.ajax @ jquery-1.12.3.min.js:4
n.(anonymous function) @ jquery-1.12.3.min.js:4
$.autocomplete.source @ cadastro_form1.php:98
e.widget._search @ jquery-ui.min.js:7
(anonymous function) @ jquery-ui.min.js:6
e.widget.search @ jquery-ui.min.js:7
(anonymous function) @ jquery-ui.min.js:6
(anonymous function) @ jquery-ui.min.js:7
i @ jquery-ui.min.js:6
Onde ameri é o conteúdo que eu digitei.
26/04/2016
Andreia
27/04/2016
Andreia
Estou usando:
$(function() { $( "#tags" ).autocomplete({ source: 'consulta.php' }); });
E com esse código lista certinho
$busca = mysql_real_escape_string(RemoveAcentos($_GET['term'])); $sql="SELECT tb_endereco.cep,tb_endereco.endereco, tb_endereco.cod_endereco, tb_tipo_endereco.descricao, tb_bairros.cod_bairro, tb_bairros.nome_bairro, tb_cidades.cod_cidade,tb_cidades.nome_cidade,tb_cidades.estado,tb_cidades.cep FROM tb_endereco INNER JOIN tb_tipo_endereco ON(tb_endereco.cod_tipo_end=tb_tipo_endereco.cod_tipo_endereco) INNER JOIN tb_cidades ON(tb_endereco.cod_cidade=tb_cidades.cod_cidade) INNER JOIN tb_bairros ON(tb_endereco.cod_bairro=tb_bairros.cod_bairro) WHERE tb_endereco.endereco like '%".$busca."%' ORDER BY endereco ASC"; // echo $sql."<br />"; $sql=mysql_query($sql) or die (mysql_error()); while ($row = mysql_fetch_array($sql)) { array_push($data, formatacao($row["descricao"])." ".formatacao($row["endereco"])." - ".formatacao($row["nome_bairro"])." - ".formatacao($row["nome_cidade"])."-".strtoupper($row["estado"])); } echo json_encode($data);
Como devo alterar para poder adaptar ao seu script @William, pois é bem o que eu preciso, que ao clicar sobre um endereço ele exiba outros dados nos respectivos inputs.
Com esse aparece undefined
$(function() { // Dispara o Autocomplete a partir do segundo caracter $( "#tags" ).autocomplete({ minLength: 2, delay:2000, source: function( request, response ) { $.ajax({ url: "consulta.php", type: "get", dataType: "json", data: { // acao: 'autocomplete', term: $('#tags').val() }, success: function(data) { response(data); } }); }, focus: function( event, ui ) { $("#tags").val( ui.item.endereco ); carregarDados(); return false; }, select: function( event, ui ) { $("#tags").val( ui.item.endereco ); return false; } }) .autocomplete( "instance" )._renderItem = function( ul, item ) { return $( "<li>" ) .append( "<a>" + item.endereco + " - " + item.bairro + " - " + item.cidade + " - " + item.estado + "</a><br>" ) .appendTo( ul ); };
Estou fazendo em fases para aprender e entender...
27/04/2016
William
28/04/2016
Andreia
Como faço para ele não apagar o que foi digitado ao passar o mouse sobre o que foi retornado?
no php estou usando:
$data = array(); while ($row = mysql_fetch_array($sql)) { array_push($data, formatacao($row["descricao"])." ".formatacao($row["endereco"])." - ".formatacao($row["nome_bairro"])." - ".formatacao($row["nome_cidade"])."-".strtoupper($row["estado"])."-".$row["cep"]); } echo json_encode($data);
Como faço no php para ele "separar" os itens? Preciso pegar o valor codigo_endereco para poder jogar o resultado nos demais inputs.
Para no jquery poder exibir
$("#endereco").val(data.endereco); $("#bairro").val(data.bairro); $("#cidade").val(data.cidade); $("#estado").val(data.estado); $("#cod_endereco").val(data.codigo_endereco); $('#numero').focus();
Obrigada novamente William
11/05/2016
Andreia
Preciso de mais uma ajuda:
Quando não retornar resultado, eu preciso saber como fazer essa verificação para caso que o retorno seja apenas [ ]
meu codigo:
$( "#busca" ).autocomplete({ minLength: 2, delay:600, source: function( request, response ) { $.ajax({ url: "consulta.php", type: "get", dataType: "json", data: { acao: 'completar', term: $('#busca').val() }, success: function(data) { response(data); } }); }, select: function( event, ui ) { $("#busca").val( ui.item.cod_endereco ); carregarDados(); return false; } })
Clique aqui para fazer login e interagir na Comunidade :)