All'interno dei tag <body> e </body> ho queste istruzioni:
<form name="layoutform_ricerca" method="post" action="#">
ricerca:<input type="text" id="ricerca" name="ricerca" value="GIUSEPPE"><br>
<span id="risposta"></span>
</form>
<script>
document.layoutform_ricerca.ricerca.focus();
document.layoutform_ricerca.ricerca.select();
let ric = document.querySelector("#ricerca");
ric.addEventListener("blur", esegui, true);
function esegui() {
let valore = document.querySelector("#ricerca").value;
if (ricerca == '') { return; }
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.querySelector("#risposta").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "https://www.miosito.it/select.php?ricerca=" + valore, true);
xmlhttp.send();
}
</script>
che lasciando il focus da "ricerca" vanno a fare una chiamata ajax alla pagina select.php:
<?php
require_once 'config.php';
if (isset($_REQUEST["ricerca"])) { $ricerca = $_REQUEST["ricerca"]; }
$sql = "SELECT * FROM persone WHERE nome='$ricerca'";
if ($result = $connessione->query($sql)) {
$data=[];
if ($result->num_rows > 0) {
while ($row=$result->fetch_array(MYSQLI_ASSOC)) {
$tmp;
$tmp['id'] = $row['id'];
$tmp['nome'] = $row['nome'];
$tmp['cognome'] = $row['cognome'];
$tmp['email'] = $row['email'];
array_push($data, $tmp);
}
echo json_encode($data);
} else {
echo json_encode($data);
}
} else {
echo "Errore nell'esecuzione di $sql. " . $connessione->error;
}
?>
I dati in tabella vengono filtrati e restituiti allo span "risposta" formattati temo in formato stringa.
[{"id":"1","nome":"GIUSEPPE","cognome":"VERDI","ema il":"VERDI.GIUSEPPE@GMAIL.COM"},{"id":"22","nome": "GIUSEPPE","cognome":"MAZZINI","email":"MAZZINI.GI USEPPE@GMAIL.COM"},{"id":"23","nome":"GIUSEPPE","c ognome":"GARIBALDI","email":"GARIBALDI.GIUSEPPE@GM AIL.COM"}]
io, avrei bisogno invece di vedermi restituito un array o comunque di visualizzare una tabella (nel mio caso specifico ho bisogno di una select con i dati dentro.