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

1

I'm using JQuery, Ajax, PHP and MYSQL to do the Autocomplete in a search field for cities in Brazil.

When I type the name of the city the suggestions appear and when I move 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, everything works fine

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

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

I'dliketoknowwhatchangesIneedtomaketothecodesothatitcanfillouttheformcorrectly,withtherespectivecitydatathatIselect.NOTE:Databaserowshaveuniqueid's(idcolumn).

Followthecodebelow:

File:custom.js

$(function(){//Atribuieventoefunçãoparalimpezadoscampos$('#busca').on('input',limpaCampos);//DisparaoAutocompleteapartirdosegundocaracter$("#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;
    
asked by anonymous 04.07.2017 / 06:19

1 answer

1

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

file query.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;
?>
    
03.08.2017 / 14:52