Autocomplete em input para cadastro de cliente

22/04/2016

0

Boa tarde,

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

Andreia

Responder

Posts

22/04/2016

William

Andreia o primeiro link é do meu blog Autocomplete, tenho essa funcionalidade implementada em diversos sistemas.

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

22/04/2016

Andreia

Eu já fiz isso, não dá erro nenhum.

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

22/04/2016

William

A requisição retorna os dados em JSON quando você inspeciona pelo browser?
Responder

22/04/2016

Andreia

success: function( data ) {
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]
Responder

22/04/2016

Andreia

Peguei o exemplo do site https://jqueryui.com/autocomplete/ e não funcionou... ou seja, parece que mesmo incluindo os jquery-ui não funciona, mesmo sem consulta ao bd...
Responder

22/04/2016

William

Você tem teamview?

Depois postamos a solução no fórum.
Responder

22/04/2016

Andreia

Acho que não funciona na janela modal...

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
Responder

25/04/2016

Andreia

boa tarde,

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

26/04/2016

Andreia

Uma pergunta básica, o autocomplete funciona dentro de formulário?
Responder

27/04/2016

Andreia

Estou quase conseguindo, desculpa a ignorância mas estou começando...

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

27/04/2016

William

Então essa parte que vc postou acima só faz parte do autocomplete, tem outra função que carrega os dados nos inputs, senão me engano é carregaDados() dá uma olhada no blog.
Responder

28/04/2016

Andreia

Ele está me mostrando undefined abaixo do input, como faço para ele mostrar os itens para então eu poder selecionar e trazer os dados de acordo com o endereço selecionado?

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
Responder

11/05/2016

Andreia

Obrigada, está funcionando agora.

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

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar