Twitter Bootstrap Autocomplete

Per quanto riguarda i form direi che Twitter Bootstrap non ci fa mancare assolutamente nulla, tanto più che attraverso la funzione Typhead ci mette anche a disposizione la ricerca in tempo reale, tipo l'autocomplete di Google che abbiamo visto anche in jQuery UI Autocomplete.

Oggi vediamo come sfruttare il plugin Typehead; non c'è nulla da includere in quanto già compreso nel file bootstrap.min.js.

Il Typehead richiede i dati in questa forma:

['Matteo', 9, 13, 'Francesco']

Noi prenderemo i dati da database, li codificheremo così e passeremo il risultato a Javascript che farà il resto.

Nel mio caso uso Codeingiter, e quindi il codice sarà diverso da quello PHP canonico; ma comunque è uguale, basta scrivere il codice in altro modo:

        <?php
        $this->db->select('articolo_codice');
        $this->db->from('cr_articoli');
        $this->db->group_by('articolo_codice');
        $query = $this->db->get();
        $artArray = '[';
        foreach ($query->result() as $q) {
            $artArray .= '"' . $q->articolo_codice . '",';
        }
        $artArray .= ']';
        ?>

Eseguo la query e costruisco la stringa.

A questo punto attiviamo il Typehead:

                    <input type="text" class="ajax-typeahead">
                    <script type="text/javascript">
                       var arts = <?php echo $artArray; ?>;
                       $('.ajax-typeahead').typeahead({
                                source: arts,
                                updater: function(item) {
                                        document.location.href = "art.php?i=" + item;
                      }
                   });
                </script>

Creiamo una input text per la ricerca.

Sotto creiamo una variabile che prende i dati all'array PHP creato dalla query.

Sotto attiviamo una chiamata AJAX che cicla sulla variabile man mano che si scrive.

Infine attiviamo una funzione che altro non fa che rimandarci ad un'altra pagina quando viene selezionata una voce, prendendo in GET il valore selezionato.

Questo, a dire la verità, non è il modo più usuale, in quanto la query l'abbiamo già eseguita; cicliamo solo sui risultati.

In genere si esegue la query man mano che digitiamo, e questo per evitare spreco di risorse.

Solo che Typehead, da quanto ho capito, ancora non è in grado di fare ciò, ma ha bisogno di una sorgente già fatta.