Ajax autocomplete using json

Question

I have then following structure. I need to perform an autocomplete function retriving data from a json file and then show the results of the item selected in a pop-up.

Below you can see my code.

comuni.php

<?php $arr = array(
array(
    "nomeComune" => "Roma",
    "provincia" => "RM",
    "datasub" => "2019-12-04",
    "datapresub" => "2019-12-04"
),
array(
    "nomeComune" => "Catania",
    "provincia" => "CT",
    "datasub" => "2019-12-04",
    "datapresub" => "2019-12-04"
),
array(
    "nomeComune" => "Milano",
    "provincia" => "MI",
    "datasub" => "2019-12-04",
    "datapresub" => "2019-12-04"
),
array(
    "nomeComune" => "Napoli",
    "provincia" => "NA",
    "datasub" => "2019-12-04",
    "datapresub" => "2019-12-04"
),
array(
    "nomeComune" => "Firenze",
    "provincia" => "FI",
    "datasub" => "2019-12-04",
    "datapresub" => "2019-12-04"
),
array(
    "nomeComune" => "Bologna",
    "provincia" => "BO",
    "datasub" => "2019-12-04",
    "datapresub" => "2019-12-04"
),
array(
    "nomeComune" => "Palermo",
    "provincia" => "PA",
    "datasub" => "2019-12-04",
    "datapresub" => "2019-12-04"
),
array(
    "nomeComune" => "Genova",
    "provincia" => "GE",
    "datasub" => "2019-12-04",
    "datapresub" => "2019-12-04"
),
array(
    "nomeComune" => "Lecce",
    "provincia" => "LE",
    "datasub" => "2019-12-04",
    "datapresub" => "2019-12-04"
),
array(
    "nomeComune" => "Udine",
    "provincia" => "UD",
    "datasub" => "2019-12-04",
    "datapresub" => "2019-12-04"
));echo json_encode($arr);

htlm

<div class="input-group">
    <input size="45" name="comuni" id="comuni" class="form-control large-input" type="text" placeholder="Inserisci il nome del tuo Comune">
        <span class="input-group-btn">
            <button class="btn btn-primary large-input">Scopri</button>
        </span>
</div>
<div id="results"></div>

jQuery

$( function() {
        $.getJSON("comuni.php", function(data) {
            autoComplete = [];
            for (var i = 0, len = data.length; i < len; i++) {
                autoComplete.push(data[i].nomeComune);
            }
            $( "#comuni" ).autocomplete({
                source: autoComplete,
                minLength: 2,
                delay: 100,
                select: function () {

                },
            });
        });
    });

The Autocomplte function works fine but I'm not able to show in the results all the value of the item selected eg:

"nomeComune" => "Napoli", "provincia" => "NA", "datasub" =>"2019-12-04", "datapresub" => "2019-12-04" 

I've difficult to perform this step. Anyone can help?

Thanks

Answer 1

Here you need to get and put your selected value inside select.

jQuery

$( function() {
    $.getJSON("comuni.php", function(data) {
        autoComplete = [];
        for (var i = 0, len = data.length; i < len; i++) {
            autoComplete.push(data[i].nomeComune);
        }
        $( "#comuni" ).autocomplete({
            source: autoComplete,
            minLength: 2,
            delay: 100,
            select: function (e, ui) {
                $('#results').html(ui.item.value);
            },
        });
    });
});