Autocompilazione di un Campo dati in remoto DB con PHP - JSON - jQuery
Partendo da questo post , ho deciso di pubblicare questa piccola guida.
Quello che si vuole ottenere e' un form che autocompleti il campo prendendo i valori da un DB e nel momento che venga eseguito il POST del form , il dato vada ad aggiungersi al DB.
Per farlo abbiamo bisogno di jQuery Autocomplete UI
Quindi creiamo tre file : cerca.php , aggiungi.php , trova.html
Nel mio esempio ho creato un DB con Tabella 'citta' con un solo campo 'nome'
File:trova.html
nel head richiamiamo le librerie jQuery
poi inseriamo un piccolo script che dopo aver digitato i primi due caratteri esegue l'autocompilazione usando il file cerca.php
nel body un semplice form che quando esegue il submit apre il file aggiungi.php per inserire il dato nel DB
Codice HTML:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" />
<script>
$(document).ready(function($){
$('#citta').autocomplete({
source:'cerca.php',
minLength:2
});
});
</script>
</head>
<body>
<form action="aggiungi.php" method="post">
<input type="text" id="citta" name="nome" class="ui-autocomplete-input" />
<input type="submit">
</form>
</body>
</html>
File:aggiungi.php
un semplice file per scrivere il dato del form nel DB, chiaramente $server,$user,$password,$database devono essere completati con i vostri dati.
Codice PHP:
<?php
$con=mysqli_connect($server,$user,$password,$database);
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$name = mysqli_real_escape_string($con, $_POST['nome']);
$sql="INSERT INTO citta (nome) VALUES ('$name')";
if (!mysqli_query($con,$sql)) {
die('Error: ' . mysqli_error($con));
}
mysqli_close($con);
?>
File:cerca.php
questo file preleva i dati inseriti nel form ed usando TERM ricerca nel DB i valori che hanno una corrispondenza
quindi creai con JSON l'elenco con i valori trovati
esempio: [{"value":"Milano","label":"Milano"}, ....
Codice PHP:
<?php
$mysqli = new MySQLi($server,$user,$password,$database);
if($mysqli->connect_error) {
echo 'Database connection failed...' . 'Error: ' . $mysqli->connect_errno . ' ' . $mysqli->connect_error;
exit;
} else {
$mysqli->set_charset('utf8');
}
$term = trim(strip_tags($_GET['term']));
$a_json = array();
$a_json_row = array();
if ($data = $mysqli->query("SELECT * FROM citta WHERE nome LIKE '%$term%'")) {
while($row = mysqli_fetch_array($data)) {
$name = htmlentities(stripslashes($row['nome']));
$a_json_row["value"] = $name;
$a_json_row["label"] = $name;
array_push($a_json, $a_json_row);
}
}
echo json_encode($a_json);
flush();
$mysqli->close();
?>
chiaramente il codice e' sviluppato in modo minimale per far comprendere piu' facilmente il procedimento
ed e' raccomandabile migliorarlo nel momento che si voglia implementare il codice.
DEMO
NLSweb
