problèmes typeahead avec Bootstrap 3.0 RC1

Question

Je suis en train d'utiliser Twitter Typeahead avec Bootstrap 3 RC1, parce que Bootstrap a abandonné son propre plugin typeahead sur la version 3.

J'utilise le code HTML suivant sur mon formulaire:

<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> 

Sans ajouter typeahead, le champ d'entrée de recherche affiche comme celle-ci:

J'ajouté typeahead comme t son:

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

Et le champ est devenu plus petit, avec un rectangle blanc à l'intérieur.

que je fais quelque chose de mal ou il est juste un bug sur typeahead ou Bootstrap 3 RC1?

Answer 1

changement 14 feb 2014

Comme mentionné par laurent-wartel essayer https://github.com/hyspace/typeahead.js-bootstrap3.less ou https://github.com/bassjobsen/typeahead.js-bootstrap-css CSS supplémentaire pour utiliser typeahead.js avec Bootstrap 3.1.0.

Ou utilisez utiliser le "vieux" plug-in (TB 2) avec le nouveau moteur de suggestion Bloodhound: https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/26

---

de typeahead Twitter ne semble pas prêt à Bootstrap Twitter 3. Pour utiliser le typeahead Twitter avec Twitter de Bootstrap vous aurez besoin some extra CSS (obsolète, n'est plus maintenu). L'utilisation de ce CSS ne résout pas vos problèmes.

Dans votre exemple, le champ de saisie n'obtient pas une largeur de 100%. Cela sera causé par le Javascript. Le javascript enveloppe l'entrée dans une période:

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

Cette durée n'a un 100% alors faire l'entrée à l'intérieur. Pour corriger ajouter à votre CSS:

.twitter-typeahead { 
    width: 100%; 
} 

Le Javascript définit la couleur de fond de votre entrée transparente. Si vous ne voulez pas changer la source du plugin je aurai besoin du Javascript pour corriger ce supplémentaire:

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

Il est maintenant devrait fonctionner comme prévu en fonction de votre exemple. http://www.bootply.com/73439

mise à jour

La question initiale était de RC1 pour Bootstrap 3.0.0 Twitter.vous devez également ajouter:

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

Nouveau bootply: http://bootply.com/86305

Answer 2

lieu Twitter typeahead, essayez d'utiliser bootstrap-select. Cette bibliothèque est intégrée dans le Bootstrap 3 et possède une fonctionnalité plus large.

Answer 3

Jetez un oeil à typeahead.js-bootstrap3.less.

Cela fonctionne très bien avec la dernière version de Bootstrap (v3.0.3) et vous permet de garder vos thèmes personnalisés. Il existe également un fichier .css avec un thème bootstrap par défaut.

Answer 4

Typeahead.js fixation css ont aussi des problèmes avec des groupes d'entrée (coins arrondis), j'ai trouvé quelque part les informations qu'il casse sur modaux, etc. Additionaly https://github.com/jharding/typeahead.js-bootstrap.css est pas Maintenue plus donc je vais donner un essai pour la basse Jobsen solution;)

Answer 5

Après beaucoup de recherches sans succès à tous les styles d'ajouter, je me suis finalement fixé il ajoutant une ligne à l'intérieur du constructeur typeahead (bootstrap.js ou bootstrap-typeahead.js selon la version):

this. $ Menu.width (this. $ Element.outerWidth());

Voici le code:

/* 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()); 
}