Jquery autocomplete for city search, does not distinguish data from cities with the same name

Question

I’m using Jquery, Ajax, PHP and MYSQL to do Autocomplete in a Brazilian city search field.

When I type the name of the city the suggestions appear and when I pass the mouse over each city the code automatically fill in the form with the name of the country, state, city, latitude, longitude and Timezone for the selected city, until then everything works.

The problem is: When the search returns cities with the same name, when I select one of these of the same name, only the data of the first of the list are filled in the form, no matter which one I select, only the data of the first one are filled, as shown in the example below:

When I select Cedral (Maranhão) it fills with Cedral (São Paulo).

I would like to know what changes I need to make to the code in order for it to fill out the form correctly, with the respective data of the city I select. NOTE: Database rows have unique id’s (id column).

Follow the code below:

File: 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('')
   }
}
});

File: query.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;

Answer 1

Hello, see if I can help. If so, mark up and 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);            
    });
});

php query file.

<?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;
?>