Problemi di Typeahead con Bootstrap 3.0 RC1

Sto cercando di usare Twitter Typeahead con Bootstrap 3 RC1, perché Bootstrap ha abbandonato il proprio plugin typeahead sulla versione 3.

Sto usando il seguente codice HTML sul mio modulo:

Senza aggiungere Typeahead, il campo di inserimento della ricerca viene visualizzato in questo modo:

prima di aggiungere Typeahead

Poi ho aggiunto Typeahead in questo modo:

      $('#query').typeahead({ local: ['alpha', 'bravo','charlie','delta','epsilon','gamma','zulu'] });  

    E il campo divenne più piccolo, con all’interno un rettangolo bianco.

    dopo aver aggiunto Typeahead

    quando scrivi del testo ...

    Sto facendo qualcosa di sbagliato o è solo un bug su Typeahead o Bootstrap 3 RC1?

    aggiornamento 14 feb 2014

    Come accennato da laurent-wartel, prova https://github.com/hyspace/typeahead.js-bootstrap3.less o https://github.com/bassjobsen/typeahead.js-bootstrap-css per ulteriori CSS per usare typeahead.js con Bootstrap 3.1.0.

    Oppure usa il plugin “vecchio” (TB 2) con il nuovo motore di suggerimento Bloodhound: https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/26


    Il typeahead di Twitter non sembra pronto per Bootstrap di Twitter 3. Per usare Twitter typeahead con Bootstrap di Twitter avrai bisogno di un po ‘di CSS in più (deprecato, non più mantenuto). L’uso di questo CSS non risolve i tuoi problemi.

    Nel tuo esempio il campo di input non ha una larghezza del 100%. Questo sarà causato dal Javascript. Il javascript racchiude l’input in un intervallo:

      

    Questo intervallo non ha un 100%, quindi inseriscilo al suo interno. Per aggiustare aggiungi al tuo CSS:

     .twitter-typeahead { width: 100%; } 

    Il Javascript imposta il colore di sfondo dell’input su trasparente. Se non vuoi cambiare la sorgente del plugin avrò bisogno di qualche Javascript aggiuntivo per risolvere questo problema:

     $('.tt-query').css('background-color','#fff'); 

    Ora dovrebbe funzionare come previsto in base al tuo esempio. http://www.bootply.com/73439

    aggiornare

    La domanda originale era per RC1 per Bootstrap 3.0.0 di Twitter. devi anche aggiungere:

     .tt-dropdown-menu { width:100%; } 

    Nuovo bootply: http://bootply.com/86305

    Dai un’occhiata a typeahead.js-bootstrap3.less .

    Funziona alla grande con l’ultima versione di Bootstrap (v3.0.3) e ti consente di mantenere le tue tematiche personalizzate. C’è anche un file .css con il tema bootstrap predefinito.

    Il fix css di Typeahead.js ha anche problemi con i gruppi di input (arrotondamento degli spigoli), ho trovato qualche informazione che si rompe sui modali, ecc. Additionaly https://github.com/jharding/typeahead.js-bootstrap.css non è più mantenuto quindi vado a provare per la soluzione Bass Jobsen;)

    Dopo molte ricerche senza alcuna aggiunta di stili, l’ho finalmente risolto aggiungendo una riga all’interno del costruttore Typeahead (bootstrap.js o bootstrap-typeahead.js a seconda della versione):

    . Questo $ menu.width (questo $ element.outerWidth ().);

    Ecco il codice:

     /* TYPEAHEAD PUBLIC CLASS DEFINITION * ================================= */ var Typeahead = function (element, options) { this.$element = $(element) this.options = $.extend({}, $.fn.typeahead.defaults, options) this.matcher = this.options.matcher || this.matcher this.sorter = this.options.sorter || this.sorter this.highlighter = this.options.highlighter || this.highlighter this.updater = this.options.updater || this.updater this.source = this.options.source this.$menu = $(this.options.menu) this.shown = false this.listen() this.$menu.width(this.$element.outerWidth()); } 

    Invece Twitter Typeahead, prova ad usare bootstrap-select . Questa libreria è integrata in Bootstrap 3 e ha una funzionalità più ampia.