Pillole di jQuery – Campo input autocompletante con ajax e json

| 7 marzo 2012 | 2 Comments

JQuery LogoGiorni fa per lavoro mi è capitato di dover creare un campo di input di un form in cui si autocompletasse il nome del comune. Questo doveva essere fatto per essere sicuri che non vi fossero errori di battitura e che accanto al nome della città apparisse anche la sigla della provincia (per chi non lo sapesse esistono diversi comuni omonimi in Italia, cosa che rende in un form il solo nome del paese non discriminante).
Per realizzare tuttò ciò il sistema migliore mi è parso l’utilizzo di jquery con una connessione ajax ad un database che restituiva dati in formato json. Nell’esempio sottostante è stato simulata la risposta del database dei comuni in formato json. Basta iniziare a scrivere un qualsiasi nome di comune e dalla seconda lettera in poi vi verrà fornita la lista dei comuni compatibili con i dati inseriti. Da notare che nel “database” sono presenti tutti gli 8073 comuni d’Italia. Nel caso in cui cambiate focus, l’input prendere automaticamente il primo comune della lista sottostante. Se non esistono comuni compatibili con i caratteri scritti, invece, l’input si svuoterà.

Apri l’esempio in una nuova finestra

Per la realizzazione del seguente esempio è stato usato il framework di javascript, jQuery con la sua UI.

Nell’header della vostra pagina dovrete inserire i link alle seguenti librerie di jquery e relativo css.


<script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.widget.js"></script><script type="text/javascript" src="js/ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.autocomplete.js"></script>

Dopo aver fatto ciò dovrete inserire in un punto qualsiasi della pagina (di solito o nell’header o nelle vicinanze dell’input) il seguente codice javascript.

<script type="text/javascript">// <![CDATA[
            $(document).ready(function(){
                $("#citta").keyup(function() {
                    $(this).autocomplete({source: "comuni.php", minLength: 2 })
                });

                function importdata(term) {
                    $.ajax({
                        type: "GET",
                        url: "comuni.php",
                        data: "term="+term,
                        dataType: "json",
                        success: function(response){
                            if (response === null) {
                                $("#citta").val("");
                            } else {
                                $("#citta").val(response[0]);
                            }
                        },
                        error: function(){
                            $("#citta").val("");
                        }
                    });
                }

                $("#citta").focusout(function() {
                    if ($("#citta").val().length >= 2) {
                        var comune = $(this).val().split(" (");
                        importdata(comune[0]);
                    } else {
                        $("#citta").val("");
                    }
                });

            });

// ]]></script>

Come ultimo passaggio dovete inserire nel body il codice del campo input.

<input id="citta" type="text" name="citta" value="" />

Per quanto riguarda, invece, la parte del database potete recuperare i dati sia da un file di testo (nell’esempio un csv):

<!--?php if (isset($_GET['term'])) {     $term = $_GET['term'];     $results = array();     $var = file_get_contents("comuni.csv");     $var = explode("\n", $var);     foreach ($var as $line =--> $data) {
        $exploded_data = explode(",", $data);
        if (strlen($data) > 0) {
            if (preg_match("/^" . $term . "/i", substr($exploded_data[1], 1, -1))) {
                $results[] = substr($exploded_data[1], 1, -1) . ' (' . substr($exploded_data[2], 1, -1) . ')';
            }
        }
    }
    echo json_encode($results);
}
?>

oppure da database con una query:

<!--?php if (isset($_GET['term'])) {     $term = trim($_GET['term']);     $results = array();     $con = mysql_connect("localhost", "user", "pass");     if (!$con) {         die('Could not connect: ' . mysql_error());     }     mysql_select_db("db", $con);     $result = mysql_query("SELECT comune, provincia FROM comuni WHERE comune LIKE '" . $term . "%'");     while ($row = mysql_fetch_array($result)) {         $results[] = $row['comune'] . ' (' . $row['provincia'] . ')';     }     mysql_close($con);     echo json_encode($results); } ?-->

Buon divertimento!

VN:F [1.9.22_1171]
Rating: 7.3/10 (8 votes cast)
VN:F [1.9.22_1171]
Rating: +4 (from 4 votes)
Pillole di jQuery - Campo input autocompletante con ajax e json, 7.3 out of 10 based on 8 ratings

Tags: , , , ,

Category: Informatica

About the Author ()

Comments (2)

Trackback URL | Comments RSS Feed

  1. Alberto scrive:

    Grazie, mi sei stato molto utile.
    Saluti

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)
  2. Lorenzo scrive:

    Ciao, innanzitutto grazie per questa utilissima guida!

    Ne approfitto per fare una segnalazione:

    quando clicco col mouse su uno dei valori proposti nella tendina, il clic viene considerato focusout, quindi parte la richiesta ajax che va a sostituire il valore scelto con il primo della tendina.

    Se può essere utile, io personalmente ho risolto il problema rimuovendo la gestione dell’evento focusout, e eseguendo il controllo al momento del submit del form.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

Leave a Reply