Home / Programmazione / Javascript - AJAX / Twitter Bootstrap Typehead con AJAX
Mattepuffo

Twitter Bootstrap Typehead con AJAX

Twitter Bootstrap Typehead con AJAX

In un precedene articolo abbiamo visto come usare la funzione Typehead per attivare l'autocompletamento in Twitter Bootstrap.

Solo che in quell'occasione ogni volta eseguivamo la query nella pagina, costruendo poi la stringa di dati.

In definitiva non usavamo AJAX.

Ed ecco che poi ho capito come fare le cose fatte bene e ve le riporto qua.

Prima di tutto creiamo un file in PHP che esegue la query; è il file che verrà interrogato:

$res = array();
foreach ($objAjax->getArticoli() as $var) {
    $res[] = $var['a_titolo'];
}

echo json_encode($res);

In pratica restituisco i dati in formato JSON.

Poi abbiamo sempre la nostra bella input:

<input type="text" class="input-xlarge search-query" placeholder="Search">

Infine sotto la input ci piazziamo il codice Javascript:

                             $('.search-query').typeahead({
                                    minLength: 3,
                                    items: 20,
                                    source: function(query, process) {
                                        $.post(ajax_articoli.php', {q: query}, function(data) {
                                            process(JSON.parse(data));
                                        });
                                    },
                                    updater: function(item) {
                                        // DO STUFF
                                    }
                                });

Come source usiamo la funzione post di jQuery AJAX, e gli indiachiamo il file da interrogare (quello creato sopra) e cosa ricercare.

Poi processiamo il risultato con JSON.parse.

Nella funzione updater indichiamo cosa fare quando scegliamo il risultato.