problemi typeahead con Bootstrap 3.0 RC1

Question

che sto cercando di utilizzare Twitter Typeahead con Bootstrap 3 RC1, perché Bootstrap abbandonato il proprio plug-in typeahead sulla versione 3.

Sto utilizzando il seguente codice HTML sulla mia forma:

<div class="well"> 
<form> 
    <fieldset> 
     <div class="form-group"> 
      <label for="query">Search:</label> 
      <input type="text" class="form-control" name="query" id="query" placeholder="Start typing something to search...">    
     </div> 
     <button type="submit" class="btn btn-primary">Search</button> 
    </fieldset> 
</form> 
</div> 

Senza aggiungere typeahead, il campo di input di ricerca viene visualizzato come questo:

poi ho aggiunto typeahead come t his:

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

E il campo è diventato più piccolo, con un rettangolo bianco al suo interno.

sto facendo qualcosa di sbagliato o è solo un bug su typeahead o Bootstrap 3 RC1?

Answer 1

aggiornamento 14 feb 2014

Come menzionato da laurent-wartel provare https://github.com/hyspace/typeahead.js-bootstrap3.less o https://github.com/bassjobsen/typeahead.js-bootstrap-css per ulteriori CSS utilizzare typeahead.js con Bootstrap 3.1.0.

O uso usare il plugin "vecchio" (TB 2) con il nuovo motore Bloodhound suggerimento: https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/26

---

typeahead di Twitter non sembra pronto per Twitter Bootstrap 3. Per utilizzare typeahead di Twitter con Twitter di Bootstrap è necessario some extra CSS (deprecato, non più gestito). L'uso di questo CSS non risolve i tuoi problemi.

Nell'esempio il campo di immissione non ha una larghezza del 100%. Questo sarà causato dal Javascript. Il javascript avvolge l'ingresso in un arco:

<span class="twitter-typeahead" 
    style="position: relative; display: inline-block; direction: ltr;"> 

Questo arco non ha ottenuto un 100% in modo da fare di ingresso 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 si desidera cambiare la fonte di plug-in che avrà bisogno di qualche ulteriore Javascript per risolvere questo problema:

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

Ora si dovrebbe funzionare come previsto, sulla base di esempio. http://www.bootply.com/73439

aggiornamento

La domanda originale era per RC1 per di Twitter Bootstrap 3.0.0.è inoltre necessario aggiungere:

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

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

Answer 2

Invece Twitter typeahead, tenta di utilizzare bootstrap-select. Questa libreria è integrata in Bootstrap 3 e ha una funzionalità più ampia.

Answer 3

Dai un'occhiata allo typeahead.js-bootstrap3.less.

Funziona alla grande con l'ultima versione di Bootstrap (v3.0.3) e ti consente di mantenere il tuo tema personalizzato. C'è anche un file .css con il tema bootstrap predefinito.

Answer 4

Typeahead.js fissaggio css hanno anche problemi con i gruppi di ingresso (angoli di arrotondamento), ho trovato qualche info che si rompe sulla modali, ecc Additionaly https://github.com/jharding/typeahead.js-bootstrap.css non è più mantenuto in modo che io sto per dare una prova per Bass Jobsen soluzione;)

Answer 5

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

this. $ Menu.width (this. $ 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()); 
}