jquery - typeahead bootstrap

Problemas con Typeahead con Bootstrap 3.0 RC1

Question

Intento utilizar Twitter Typeahead con Bootstrap 3 RC1, porque Bootstrap eliminó su propio plugin de escritura anticipada en la versión 3.

Estoy usando el siguiente HTML en mi formulario:

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

Sin agregar Typeahead, el campo de entrada de búsqueda se muestra así:

Luego agregué Typeahead así:

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

Y el campo se hizo más pequeño, con un rectángulo blanco dentro.

¿Estoy haciendo algo mal o es solo un error en Typeahead o Bootstrap 3 RC1?

Answer 1

Después de mucha investigación sin suerte agregando estilos, finalmente lo arreglé agregando una línea dentro del constructor Typeahead (bootstrap.js o bootstrap-typeahead.js dependiendo de su versión):

esto. $ menu.width (this. $ element.outerWidth ());

Aquí está el código:

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

Answer 2

Eche un vistazo a https://github.com/hyspace/typeahead.js-bootstrap3.less .

Funciona muy bien con la última versión de Bootstrap (v3.0.3) y le permite mantener su temática personalizada. También hay un archivo .css con tematización bootstrap predeterminada.

Answer 3

En lugar de Twitter Typeahead, intente utilizar la rutina de bootstrap-select . Esta biblioteca está integrada en Bootstrap 3 y tiene una funcionalidad más amplia.

Answer 4

Typeahead.js css fixing también tiene problemas con los grupos de entrada (redondeo de esquinas), encontré en algún lugar información que rompe con los modales, etc. Additionaly https://github.com/jharding/typeahead.js-bootstrap.css ya no se mantiene así que voy a probar la solución Bass Jobsen;)

Answer 5

actualización 14 feb 2014

Como mencionó laurent-wartel pruebe https://github.com/hyspace/typeahead.js-bootstrap3.less o https://github.com/bassjobsen/typeahead.js-bootstrap-css para obtener CSS adicional para usar typeahead.js con Bootstrap 3.1.0.

O utilice el complemento "antiguo" (TB 2) con el nuevo motor de sugerencias Bloodhound: https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/26

El tipo de Twitter no parece estar listo para Bootstrap 3 de Twitter. Para usar el encabezado de Twitter con Bootstrap de Twitter, necesitarás un poco de CSS adicional (obsoleto, ya no se mantiene). Usar este CSS no soluciona tus problemas.

En su ejemplo, el campo de entrada no obtiene un ancho del 100%. Esto será causado por el Javascript. El javascript envuelve la entrada en un lapso:

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

Este lapso no tiene un 100%, así que hazlo dentro. Para corregir agregar a su CSS:

.twitter-typeahead {
  width: 100%;
}

El Javascript establece el color de fondo de su entrada en transparente. Si no quiere cambiar el código fuente del complemento necesitaré Javascript adicional para solucionarlo:

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

Ahora debe funcionar como se espera según su ejemplo. http://www.bootply.com/73439

actualizar

La pregunta original era para RC1 para Twitter Bootstrap 3.0.0. también necesitas agregar:

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

Nuevo bootply: http://bootply.com/86305