Script autocompletamento in PHP di una input box
Posted on agosto 13, 2010
Filed Under Form Email | Leave a Comment
Nell’articolo seguente andremo a realizzare uno script per l’autocompletamento di due input box facendo uso delle jquery. Le due input box saranno riempite dal contenuto di un file di testo e da una tabella presente in un database MySQL. Lo script mostrera’ all’utente che inserisce del testo nellle due input box il contenuto che puo’ selezionare dalla tendina sottostante.
Lo script presume una conoscenza minima di interfacciamento con il proprio database ed una conososcenza di base nella struttura dei percorsi.
Il pacchetto contenente la cartella il contenuto della lib necessaria al funzionamento dello script e’ disponibile cliccando qui
Tutto il contenuto del rar (puo’ essere aperto con winrar liberamente scaricabile online) deve essere estratto all’interno della cartella lib che si trova allo stesso livello dello script.
Ecco il contenuto del file autocompleta.php
<html>
<head>
<title>Autocompletamni</title>
<script type=”text/javascript” src=”lib/jquery.js”></script>
<script type=’text/javascript’ src=’lib/jquery.bgiframe.min.js’></script>
<script type=’text/javascript’ src=’lib/jquery.ajaxQueue.js’></script>
<script type=’text/javascript’ src=’lib/thickbox-compressed.js’></script>
<script type=’text/javascript’ src=’lib/jquery.autocomplete.js’></script>
<link rel=”stylesheet” type=”text/css” href=”lib/jquery.autocomplete.css” />
</head>
<body>
<table>
<tr>
<td>
<script type=”text/javascript”>
$().ready(function() {
var cities = [
<?php
$filename = "categorie.txt"; // Il nome del file varia in base alla necessita'
$handle = fopen($filename,"r");
$stringa = fread($handle, filesize($filename));
echo($stringa);
fclose($handle);
?>
""];
var cities2 = [
<?php
include("config/db.php"); // Path del Database
$nomeTabella = $tbl_prefix."provincia"; // Nome della tabella da utilizzare per il precaricamento della tendina
$stringa = "";
$queryCat = "SELECT * FROM $nomeTabella GROUP BY pr";
$queryListCat = mysql_query($queryCat);
while($datiCat = mysql_fetch_array($queryListCat))
{
$pr = $datiCat['pr'];
echo(‘”‘.$pr.’”, ‘);
}
?>
“”];
function findValueCallback(event, data, formatted) {
$(“<li>”).html( !data ? “No match!” : “Selected: ” + formatted).appendTo(“#result”);
}
function formatItem(row) {
return row[0] + ” (<strong>id: ” + row[1] + “</strong>)”;
}
function formatResult(row) {
return row[0].replace(/(<.+?>)/gi, ”);
}
$(“#suggest1″).autocomplete(cities,{max:3});
$(“#suggest2″).autocomplete(cities2,{max:4});
$(“:text, textarea”).result(findValueCallback).next().click(function() {
$(this).prev().search();
});
$(“#scrollChange”).click(changeScrollHeight);
$(“#clear”).click(function() {
$(“:input”).unautocomplete();
});
});
function changeOptions(){
var max = parseInt(window.prompt(‘Please type number of items to display:’, jQuery.Autocompleter.defaults.max));
if (max > 0) {
$(“#suggest1″).setOptions({
max: max
});
}
}
function changeScrollHeight() {
var h = parseInt(window.prompt(‘Please type new scroll height (number in pixels):’, jQuery.Autocompleter.defaults.scrollHeight));
if(h > 0) {
$(“#suggest1″).setOptions({
scrollHeight: h
});
}
}
</script>
Da file: <input type=”text” maxlength=”250″ name=”cat” id=”suggest1″ value=”" /></td>
<td>Da database: <input type=”text” maxlength=”250″ name=”luogo” id=”suggest2″ value=”"/></td>
</tr>
</table>
</body>
</html>
Il file categorie.txt avra’ questo contenuto:
“italia”,”indonesia”,”oceania”,”australia”,
il file db.php presente nella cartella config sara’ cosi’ fatto:
<?php
$dbhost = ‘localhost’; // Da sostituire con i vostri dati di connessione al DB
$dbusername = ‘root’; // Da sostituire con i vostri dati di connessione al DB
$dbpasswd = ”; // Da sostituire con i vostri dati di connessione al DB
$database_name = ‘freescriptphp’; // Da sostituire con il nome del DB
$tbl_prefix = “aut_”; // prefisso della tabella.
$connection = mysql_connect(“$dbhost”,”$dbusername”,”$dbpasswd”) or die (“Impossibile collegarsi al server.”);
$db = mysql_select_db(“$database_name”, $connection) or die(“Impossibile selezionare il database.”);
?>
La tabella aut_provincia sara’ cosi’ fatta:
CREATE TABLE IF NOT EXISTS `aut_provincia` (
`key_prov` int(11) NOT NULL AUTO_INCREMENT,
`regione` varchar(120) NOT NULL DEFAULT ”,
`pr` varchar(250) NOT NULL DEFAULT ”,
`nome_prov` varchar(120) NOT NULL,
`comune` varchar(250) NOT NULL DEFAULT ”,
`istat` varchar(10) NOT NULL DEFAULT ”,
PRIMARY KEY (`key_prov`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 ;
Questo un estratto di alcuni dati presenti nella tabella:
INSERT INTO `aut_provincia` (`key_prov`, `regione`, `pr`, `nome_prov`, `comune`, `istat`) VALUES
(1, ‘Sicilia’, ‘AG’, ‘Agrigento\n’, ‘AGRIGENTO’, ’84001′),
(2, ‘Toscana’, ‘AR’, ‘Arezzo\n’, ‘AREZZO’, ”),
(3, ‘Toscana’, ‘GR’, ‘Grosseto\n’, ‘GROSSETO’, ”),
(4, ‘Sicilia’, ‘AV’, ‘Avellino\n’, ‘AVELLINO’, ”)
Una volta lanciato lo script autocompleta.php sara’ possibile inserire nella prima input box la lettere “i” per veder apparire la tendina con italia e indonesia prese dal file categorie; inserendo la lettera “a” nella seconda casella comparira’ l’elenco contentente: “AG”,”AR”,”AV”.
Buon autocompletamento a tutti…
Others Script adv
Leave a Reply