the result I would need is very simple, given an autocomplete input, a city selected by the user I would like the latitude and longitude of the city chosen by the user to be completed in two hidden fields.

Now my code accesses an external wordpress table where, it allows the user to be able to select only the name of the city.

table: places

table fields:

name
lat
lon

example:

roma
41.8933203
12.4829321

code:

<script>
    /*ACCEDI ALLA LATITUDINE E LONGITUDINE DA TABELLA ESTERENA*/

    var places_geo = <?php

        global $wpdb;

        $accedi_tabella = $wpdb->get_results( "SELECT * FROM place" );

        $nomi_places = [];
        foreach( $accedi_tabella as $place ){
            $nomi_places[] = $place->name;
        }
        echo json_encode( $nomi_places );
        ?>;
    places_geo.length||(places_geo=[]);
    $('#form-geo').mdbAutocomplete({
        data: places_geo
    });

    $('#form-geo').mdbAutocomplete({
        data: places_geo
    });

</script>

input autocomplete:

<input type="search" id="form-geo" name="art">

as you can see from the script the value that will come out is only the name, now I want that if the user selects Rome, as in the example shown in two hidden inputs latitude and longitude are filled in, how to do?

Framework: MDB (Material Design Bootstrap)

it was recommended to me:

in my footer page:

<script>

function (e) {
    var value = e.target.value; // get current value
    var place = places_geo[value]; // get current place by place
    if (typeof place === 'undefined') { return; } // make sure we have such place defined
    [lat, long] = places_geo[value]; // fetch lat and long
    $('#lat').val(lat); // set value via jQuery
    $('#long').val(long); // set value via jQuery
}

var places_geo = <?php

    global $wpdb;

    $accedi_tabella = $wpdb->get_results( "SELECT * FROM place" );

    $nomi_places = [];
    foreach( $accedi_tabella as $place ){
        $nomi_places[$place->name] = [$place->lat, $place->lon];
    }
    echo json_encode( $nomi_places );
    ?>;

$('#form-geo').mdbAutocomplete({
    data: Object.keys(places_geo)
});

</script>

in my search page:

<input type="search" id="form-geo" name="art">
 <input id="lat">
<input id="lon">

but not work