web-dev-qa-db-fra.com

Problèmes typeahead avec Bootstrap 3.0 RC1

J'essaie d'utiliser Twitter Typeahead avec Bootstrap 3 RC1, car 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 de saisie de la recherche s’affiche comme suit:

before adding Typeahead

Puis j'ai ajouté Typeahead comme ceci:

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

after adding Typeahead

when typing some text...

Est-ce que je fais quelque chose de mal ou est-ce juste un bug sur Typeahead ou Bootstrap 3 RC1?

jquerytwitter-bootstrapbootstrap-typeaheadtypeahead.jstwitter-bootstrap-3
24
javsmo

mise à jour 14 février 2014

Comme mentionné par laurent-wartel try https://github.com/hyspace/typeahead.js-bootstrap3.less ou https://github.com/bassjobsen/typeahead.js-bootstrap -css pour que les CSS supplémentaires utilisent typeahead.js avec Bootstrap 3.1.0.

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

La typeahead de Twitter ne semble pas prête pour le Bootstrap 3 de Twitter . Pour utiliser la typeahead de Twitter avec le Bootstrap de Twitter, vous aurez besoin de des CSS supplémentaires (obsolète, plus maintenu) . L'utilisation de ce CSS ne résout pas le problème tes problèmes.

Dans votre exemple, le champ de saisie n'a pas une largeur de 100%. Ce sera causé par le Javascript. Le javascript encapsule l'entrée dans un span:

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

Cet intervalle n'a pas 100% alors saisissez-le à l'intérieur. Pour corriger ajouter à votre CSS:

.Twitter-typeahead {
  width: 100%;
}

Le javascript définit la couleur de fond de votre entrée sur transparent. Si vous ne voulez pas changer la source du plugin, j'ai besoin de Javascript supplémentaire pour résoudre ça:

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

Maintenant, cela devrait fonctionner comme prévu en fonction de votre exemple. http://www.bootply.com/73439

mettre à jour

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

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

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

39
Bass Jobsen

Jetez un coup d’œil à typeahead.js-bootstrap3.less .

Cela fonctionne très bien avec la dernière version de Bootstrap (v3.0.3) et vous permet de garder votre thème personnalisé. Il existe également un fichier .css avec la thématique d’amorçage par défaut.

2
Laurent W.

Après de nombreuses recherches sans succès, j'ai finalement résolu le problème en ajoutant une ligne dans le constructeur Typeahead (bootstrap.js ou bootstrap-typeahead.js selon votre 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());
}
0
lukiller