1

Estou usando o JQuery, Ajax, PHP e MYSQL para fazer o Autocompletar em um campo de busca de cidades do Brasil.

Quando eu digito o nome da cidade as sugestões aparecem e quando eu passo o mouse por cima de cada cidade o código automaticamente preencher o formulário com o nome do país, estado, cidade, latitude, longitude e timezone referente a cidade selecionada, até aí tudo funciona.

O problema é: Quando a pesquisa retorna cidades com o mesmo nome, quando eu seleciono uma dessas de mesmo nome, somente os dados da primeira da lista são preenchidos no formulário, não importa qual delas eu selecione, somente os dados da primeira são preenchidos, como mostra o exemplo abaixo:

Quando eu seleciono Cedral (Maranhão) ele preenche com Cedral (São Paulo).

inserir a descrição da imagem aqui

Eu gostaria de saber que alterações eu preciso fazer no código para que ele passe a preencher o formulário corretamente, com os respectivos dados da cidade que eu seleciono. OBS: As linhas do banco de dados tem id's únicas (coluna id).

Segue o código abaixo:

Arquivo: custom.js

$(function() {

// Atribui evento e função para limpeza dos campos
$('#busca').on('input', limpaCampos);

// Dispara o Autocomplete a partir do segundo caracter
$( "#busca" ).autocomplete({
    minLength: 2,
    source: function( request, response ) {
        $.ajax({
            url: "consulta.php",
            dataType: "json",
            data: {
                acao: 'autocomplete',
                parametro: $('#busca').val()
            },
            success: function(data) {
               response(data);
            }
        });
    },
    focus: function( event, ui ) {
        $("#busca").val( ui.item.cidade );
        carregarDados();
        return false;
    },
    select: function( event, ui ) {
        $("#busca").val( ui.item.cidade );
        return false;
    }
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .append(  item.pais + " - " + item.cidade + " (" + item.estado + ") "  )
    .appendTo( ul );
};

// Função para carregar os dados da consulta nos respectivos campos
function carregarDados(){
    var busca = $('#busca').val();

    if(busca != "" && busca.length >= 2){
        $.ajax({
            url: "consulta.php",
            dataType: "json",    
            data: {
                acao: 'consulta',
                parametro: $('#busca').val()
            },
            success: function( data ) {
               $('#pais').val(data[0].pais);
               $('#cidade').val(data[0].cidade);
               $('#estado').val(data[0].estado);
               $('#latitude').val(data[0].latitude);
               $('#longitude').val(data[0].longitude);
               $('#timezone').val(data[0].timezone);
            }
        });
    }
}

// Função para limpar os campos caso a busca esteja vazia
function limpaCampos(){
   var busca = $('#busca').val();

   if(busca == ""){
   $('#pais').val('');
       $('#cidade').val('')
       $('#estado').val('');
       $('#latitude').val('');
       $('#longitude').val('');
       $('#timezone').val('')
   }
}
});

Arquivo: consulta.php

<?php 
// Dados da conexão com o banco de dados
define('SERVER', 'SERVER');
define('DBNAME', 'DBNAME');
define('USER', 'USER');
define('PASSWORD', 'PASS');

// Recebe os parâmetros enviados via GET
$acao = (isset($_GET['acao'])) ? $_GET['acao'] : '';
$parametro = (isset($_GET['parametro'])) ? $_GET['parametro'] : '';

// Configura uma conexão com o banco de dados
$opcoes = array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES UTF8');
$conexao = new PDO("mysql:host=".SERVER."; dbname=".DBNAME, USER, PASSWORD, $opcoes);

// Verifica se foi solicitado uma consulta para o autocomplete
if($acao == 'autocomplete'):
$where = (!empty($parametro)) ? 'WHERE cidade LIKE ?' : '';
$sql = "SELECT cidade, estado, pais FROM tabela " . $where;

$stm = $conexao->prepare($sql);
$stm->bindValue(1, '%'.$parametro.'%');
$stm->execute();
$dados = $stm->fetchAll(PDO::FETCH_OBJ);

$json = json_encode($dados);
echo $json;
endif;

// Verifica se foi solicitado uma consulta para preencher os campos do formulário
if($acao == 'consulta'):
$sql = "SELECT cidade, estado, pais, latitude, longitude, timezone FROM tabela ";
$sql .= "WHERE cidade LIKE ? LIMIT 1";

$stm = $conexao->prepare($sql);
$stm->bindValue(1, $parametro.'%');
$stm->execute();
$dados = $stm->fetchAll(PDO::FETCH_OBJ);

$json = json_encode($dados);
echo $json;
endif;
4
  • Seria louvável se colocasse o html para quem quiser testar não ter o trabalho de criá-lo.
    – user60252
    Commented 4/07/2017 às 11:12
  • Porque não busca pelo ID da cidade em vez do nome e ajusta sua consulta?
    – Marconi
    Commented 4/07/2017 às 11:59
  • O problema é que você armazena o nome da cidade em #busca e na função carregarDados, com AJAX, você busca os dados da cidade com esse nome. No PHP, você seleciona do banco a cidade pelo nome e define um limite de 1 registro. Isso sempre retornará o primeiro registro, como está acontecendo. Você deve buscar a cidade pelo id, que é único para cada registro.
    – Woss
    Commented 4/07/2017 às 11:59
  • Já verificou essa posição zero, será que não é isso? data[0].pais, aqui vc está pegando o primeiro da lista. não seria o caso de pegar a chave do selecionado? a propósito, mude a variável de retorno data para response ou result para não conflitar com a submissão Commented 4/07/2017 às 12:02

1 Resposta 1

2

Olá, veja se consegui ajudar. Caso sim, marque para cima e no tick ;)

<?php
$("#busca").change(function() {
    pais = $(this).val();

    $.getJSON("consulta.php", {consulta:pais}, function(json){
        $("#pais").val(json[0]pais);    
        $("#cidade").val(json[0]cidade);    
        $("#estado").val(json[0]estado);    
        $("#latitude").val(json[0]latitude);    
        $("#longitude").val(json[0]longitude);
        $("#timezone").val(json[0]timezone);            
    });
});

arquivo consulta.php

<?php
define('SERVER', 'SERVER');
define('DBNAME', 'DBNAME');
define('USER', 'USER');
define('PASSWORD', 'PASS');

$rs = $conexao->query("SELECT cidade, estado, pais, latitude, longitude, timezone FROM tabela WHERE pais = '".$_GET['pais']."' ");
$total = $rs->num_rows;

$Array = Array();
while($row = $rs->fetch_assoc()) {
    $Array[] = Array(
        "cidade"    => $row['cidade'],
        "estado"    => $row['estado']
        "pais"      => $row['pais']
        "latitude"  => $row['latitude']
        "longitude" => $row['longitude']
        "timezone"  => $row['timezone']
    );
}

$json_encode = json_encode($Array);


echo $json_encode;
?>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .