Aruba.it - Registrazione dominio con spazio web illimitato € 20.66 + iva/anno
www.

Joomla! - Autocomplete da DB con più parametri

google-plus Scritto da . Postato in Joomla!

Nell' articolo anteriore(Autocomplete da Database), ho usato il widget jQuery UI - Autocomplete, collegandolo a un file php che restituisse in tempo reale la lista di opzioni disponibili per il campo prelevandoli da una tabella del database.

Tutto questo, è molto utile, ma può essere che si desideri creare una lista di opzioni per un campo a nostra scelta dipendendo dalla presenza o meno di testo all'interno di un'altra casella di testo:
Questo, può servire per esempio quando si vogliono impostare i parametri di ricerca di Hotel, attività o quant'altro, prima decidendo la regione nella prima casella di testo, poi selezionando una delle città disponibili in quella regione dalla seconda casella di testo.

In poche parole, la lista autocomplete della seconda casella di testo deve dipendere la contenuto della prima casella di testo.

Il codice, deve quindi cambiare, proprio perché ora non viene passato solo il parametro term, parametro nativo nel widget Autocomplete, ma anche il parametro che determinerà il filtro della lista della seconda casella di testo:

Nel codice Javascript, il codice cambierà nella seguente maniera:

<script>
(function($) {
    $(document).ready(function(){
        $("#regione").autocomplete({ source: "libraries/regione.php"  });
        $("#citta").autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: "libraries/citta.php",
                dataType: "json",
                    data: {
                        term: request.term,                        
                        state: $("#regione").val(), //contenuto casella di testo regione
                    },       
                    type: "POST",  
                    success: function(data) {
                        response($.map(data, function(item) {
                            return {
                                label: item.citta,
                        value: item.citta    
                            }
                            }));
                        },
                select: function(event, ui) {
                      $('#regione').value(ui.item.regione);
                }
                        });               
                }
        });
 })(jQuery);
</script>

Nello script, all'interno del metodo 'autocomplete', viene inserita una chiamata al metodo jQuery 'ajax', il quale richiama lo script PHP (in questo caso citta.php). Ad esso, oltre a term, viene passato un altro parametro: state.

All'interno di success, viene generato attraverso il metodo 'map' l'array json che viene quindi restituito (return) al metodo 'autocomplete'.
 
La classe PHP che si occuperà delle regioni, cioè della prima casella di testo, sarà pressoché identica a quella vista nel precedente articolo, estraendo dalla tabella database interessata tutti i nomi delle regioni che vogliamo compaiano nell'elenco con un'opportuna query SQL.

SELECT regione
FROM mytable_regioni
WHERE regione LIKE '$this->term%'
ORDER BY regione ASC

Nel caso dello script PHP che si occuperà delle città, si deve leggermente modificarlo, tenendo in conto del secondo parametro nella query e del fatto che in assenza di esso dev'essere comunque restituito l'elenco integrale delle città:  

<?php
class Autocomplete
{
    public $term;
    //secondo parametro
    public $state;
    public $conn;

        public function __construct()
        {
        $this->dbConnect();
        $this->term = mysql_real_escape_string($_POST['term']);
        //secondo parametro
        $this->state = mysql_real_escape_string($_POST['state']);
        }

        private function dbConnect()
        {
        $config = new JConfig;    
        $this->conn = mysql_connect($config->host,$config->user,$config->password) OR die("Connessione non riuscita");
        mysql_select_db($config->db, $this->conn) OR die("Impossibile selezionare il database");
        mysql_query("set names 'utf8'");
        }

        public function printResult()
        {

        $sql ="SELECT id_regione
        FROM  mytable_regioni
        WHERE regione = '$this->state'";

        //Se vi sono record che corrispondono alla regione corrispondente
        //si aggiunge il filtro per regione alla query SQL
        (mysql_num_rows(mysql_query($sql, $this->conn)) == 1)?$sqlstate = " AND r.regione = '$this->state'":$sqlstate = "";

        $sql = "SELECT DISTINCT h.citta
            FROM hotel_details AS h
            LEFT JOIN mytable_regioni AS r ON h.id_regione = r.id_regione
            WHERE h.citta LIKE '$this->term%'";

        if ($sqlstate != "")
            $sql .= $sqlstate; //aggiunta filtro regione

        $sql .= " ORDER BY hotel.id_hotel ASC";
             
        $res = mysql_query($sql, $this->conn);
    
        $return = array();
        $arr = array();
    
        while($row = mysql_fetch_array($res))
        {
            if($row['city_id'] != "")
            {
                $arr['citta'] = $row['citta'];
                array_push($return, $arr);
            }
        }

        echo custom_json::encode($return);
        //json_encode($return); se PHP ver >= 5.3.0
        }
}

$autocomplete = new Autocomplete();
$autocomplete->printResult();
?>

Se la versione di PHP è uguale o inferiore alla 5.2.0 sarà necessario ricorrere alla classe custom_json vista nel precedente articolo per un corretto array in output:

echo custom_json::encode($return); //al posto di json_encode($return);

Con poche modifiche al nostro codice, il risultato dovrebbe essere quello sperato: usare il metodo Autocomplete con un parametro esterno preso dal contenuto di un altro elemento HTML.

Se hai gradito l'articolo, condividilo, basta un click!

Aggiungi commento


Codice di sicurezza
Aggiorna

  • logo prontopro
  • logo boutique serramento
  • koilab japan and tropical fish farm
  • Trasloco economico - gruppo Arco Traslochi
  • logo flash pulizie
  • logo revolution
  • logo planetkoi small
  • logo finiture
  • ick logo template
  • montaggio mobili trento

Realizzato da: Daniele Gagliardi
Viale Monache 3 - 38062 Arco - TN
- Contattami -

Per essere più facile ed intuitivo, il blog fa uso dei cookie, piccole porzioni di dati che consentono di capire come gli utenti navighino e ne visualizzino le pagine. I cookie non registrano alcuna informazione personale sull'utente ed eventuali dati identificabili non verranno memorizzati.