Array
(
)

Autocomplete em input para cadastro de cliente

Andreia
   - 22 abr 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.
#Código
<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:
#Código<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:
#Código
<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:
Autocomplete com jquery ui, php e mysql
Mas a busca não funciona usando:
#Código$.ajax({
url: "consulta.php",
dataType: "json",
data: {
acao: 'autocomplete',
parametro: $('#busca').val()
},
success: function(data) {
response(data);
}
});

Só como no exemplo do CEP.
Com esse aqui do fórum e também nada...
Agradeço se alguém puder me dar uma luz

William (devwilliam)
   - 22 abr 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.

Andreia
   - 22 abr 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.

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

William (devwilliam)
   - 22 abr 2016

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

Andreia
   - 22 abr 2016

success: function( data ) {
console.log(data);

Quando digito não aparece nada, depois de um tempo apareceu, no console do Chrome:

Citação:

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

Andreia
   - 22 abr 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...

William (devwilliam)
   - 22 abr 2016

Você tem teamview?

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

Andreia
   - 22 abr 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

Andreia
   - 25 abr 2016

boa tarde,

retirei a janela modal e estou usando o seguinte código agora:

#Código
$(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:

Citação:

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.

Andreia
   - 26 abr 2016

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

Andreia
   - 27 abr 2016

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

Estou usando:
#Código
$(function() {
$( "#tags" ).autocomplete({
source: 'consulta.php'
});
});


E com esse código lista certinho
#Código
$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
#Código
$(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...

William (devwilliam)
   - 27 abr 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.

Andreia
   - 28 abr 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:
#Código
$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
#Código
$("#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

Andreia
   - 11 mai 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:

#Código $( "#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;
}
})