Autocomplete em input para cadastro de cliente
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.
A busca pelo CEP está assim e funciona corretamente:
Agora criei um item Não sei o Cep que abre uma janela modal, onde o cliente deve digitar o endereço:
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:
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
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
Curtidas 0
Respostas
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.
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
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.
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
22/04/2016
A requisição retorna os dados em JSON quando você inspeciona pelo browser?
GOSTEI 0
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]
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
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
22/04/2016
Você tem teamview?
Depois postamos a solução no fórum.
Depois postamos a solução no fórum.
GOSTEI 0
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
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
22/04/2016
boa tarde,
retirei a janela modal e estou usando o seguinte código agora:
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.
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
22/04/2016
Uma pergunta básica, o autocomplete funciona dentro de formulário?
GOSTEI 0
Andreia
22/04/2016
Estou quase conseguindo, desculpa a ignorância mas estou começando...
Estou usando:
E com esse código lista certinho
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
Estou fazendo em fases para aprender e entender...
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
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
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:
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
Obrigada novamente William
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
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:
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