Autocomplete em input para cadastro de cliente

MySQL

PHP

22/04/2016

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

Curtidas 0

Respostas

William

William

22/04/2016

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.
GOSTEI 0
Andreia

Andreia

22/04/2016

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);
GOSTEI 0
William

William

22/04/2016

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

Andreia

22/04/2016

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]
GOSTEI 0
Andreia

Andreia

22/04/2016

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...
GOSTEI 0
William

William

22/04/2016

Você tem teamview?

Depois postamos a solução no fórum.
GOSTEI 0
Andreia

Andreia

22/04/2016

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
GOSTEI 0
Andreia

Andreia

22/04/2016

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.
GOSTEI 0
Andreia

Andreia

22/04/2016

Uma pergunta básica, o autocomplete funciona dentro de formulário?
GOSTEI 0
Andreia

Andreia

22/04/2016

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...
GOSTEI 0
William

William

22/04/2016

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.
GOSTEI 0
Andreia

Andreia

22/04/2016

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
GOSTEI 0
Andreia

Andreia

22/04/2016

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;
	    }
    })
GOSTEI 0
POSTAR