Dopo il simpaticissimo Hello World che ho realizzato negli scorsi giorni, ho deciso di fare un livesearch.
Quando si digita qualcosa all'interno di campo txt, si fanno chiamate al database il quale restituisce istantaneamente delle risposte in base alla stringa immessa.
Vediamo un po' la classe php
livesearch.class.php
Il codice e' abbastanza semplice (per chi ha dimestichezza con le classi).Codice PHP:<?php
// livesearch.class.php
class livesearch{
function livesearch(){
mysql_connect('host','user','pwd');
mysql_select_db('db');
}
function AJSHP_SCHEMA() {
return array("search_AJSHP");
}
function search_AJSHP($str){
$query = mysql_query("SELECT * FROM rubrica WHERE nome like '%$str%'");
$riga = '<table style="border:1px solid black">';
if (mysql_num_rows($query) > 0){
$riga .= '<tr style="font-weight:bold">
<td>Nome</td><td>Cognome</td>';
while($row = mysql_fetch_array($query))
$riga .= '<tr>
<td style="font-size:10px;"> '.$row['nome'].' </td>
<td style="font-size:10px; padding-left: 10px"> '.$row['cognome'].'</td>
</tr>';
$riga .= '</table>';
return $riga;
}
else
return 'Nessun item trovato';
}
}
?>
Il metodo search_AJSHP fa tutto il lavoro: prende la stringa in input dal txtbox fa la richiesta al db e restituisce il risultato.
vediamo ora il file livesearch.html
Per la spiegazione del codice js rimando alla pagina dellacodice:<html> <head> <title>© AJSHP Project :: LIVE SEARCH example</title> <script type="text/javascript" src="jsclasses/AJSHP.js"></script> <script type="text/javascript"> NetServices.setDefaultGatewayUrl('gateway/Gateway.class.php'); var connection = NetServices.createGatewayConnection(); var listener = new Object(); listener.onStatus = function(message) { alert(message); } listener.onService = function(s) { if(s == false) alert('Error, PHP is not working correctly.'); this.enabled = s; } listener.search_AJSHP_Result = function(v) { if(document.getElementById) document.getElementById('result').innerHTML = v; } listener.search_AJSHP_Progress = function(p) { if(document.getElementById) document.getElementById('progress').innerHTML = p + '%'; } var service = connection.getService('livesearch', listener); </script> <script type="text/javascript"> function trova_AJSHP() { if(document.getElementById) { if(service && listener.enabled) { service.search_AJSHP(document.getElementById('ms').value); } } else alert('please upgrade your browser'); } function resetta(){ document.getElementById('ms').value = ''; document.getElementById('result').innerHTML = ''; } function liveSearch(){ window.setTimeout("service.search_AJSHP(document.getElementById('ms').value)", 1); } </script> </head> <body style="font-family:Arial, Helvetica, sans-serif; font-size:10px"> <div> Che stringa vuoi cercare? <input id="ms" type="text" maxlength="300" value="write something" nkeypress="liveSearch()" autocomplete="off" onkeydown="liveSearch()" /> <input type="button" value="Reset" onClick="resetta()" /> AJSHP Progression: <span id="progress">0%</span> <fieldset> <legend>Risultato DB</legend> <span id="result"></span> </fieldset> </div> <div style="font-size:9px; color:#CCCCCC;">Powered by Andrea Perdicchia</div> </body> </html>
documentazione di ajshp
Conclusione per Andr3a
1) Il debug funziona, ma e' molto scomodo.
1.1 -Non posso controllare gli errori di php e non posso sapere dove vengono generati.
1.2 -Se voglio debuggare bene quello che succede nella parte html e' impensabile aprire 20 file html... Esempio> in questo caso faccio una richiesta al db con la lettera 'f'... il debug genera un file con 100 campi prelevati dal db con la suddetta lettera. Aggiungo una 'r' il debug genera un altro file... e cosi' via...
2) Se volessi un preloader grafico ?
3) Se volessi lavorare con le classi estendibili?
Per ora e' tutto ...
ciao
Rispondi quotando
