Problema de CSS en Twitter Typeahead con Bootstrap 3

Con el lanzamiento de Bootstrap 3. Typeahead ha sido eliminado a favor de esto:
https://github.com/twitter/typeahead.js

Lo he integrado con éxito en la recuperación remota de datos

pero estoy teniendo problemas con la autocompletación

enter image description here

como puede ver, hay dos textos que aparecen en el cuadro de texto.

Incluí el css ( https://github.com/jharding/typeahead.js-bootstrap.css ) como se dice en la documentación, pero no tuve suerte.

cualquier ayuda o sugerencia sería apreciada.

jsfiddle mostrando el problema:
http://jsfiddle.net/KrtB5/

HTML

 

Javascript :

 $('.typeahead').typeahead({ name: 'Some name', local: ['test', 'abc', 'def'] }) 

EDITAR: Actualizado para Bootstrap 3.0 EDIT 2: La llamada a Typeahead fue modificada. Ver nuevo jsfiddle

Después de jugar con el estilo, parece que la clase de control de formularios no se alinea con la tt-hint. Así que me aseguré de que los márgenes y las fronteras se alineen. Tomando la respuesta de Hieu Nguyen y agregando radio de borde y soporte para input-small / input-large

CSS

 .twitter-typeahead .tt-hint { display: block; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.428571429; border: 1px solid transparent; border-radius:4px; } .twitter-typeahead .hint-small { height: 30px; padding: 5px 10px; font-size: 12px; border-radius: 3px; line-height: 1.5; } .twitter-typeahead .hint-large { height: 45px; padding: 10px 16px; font-size: 18px; border-radius: 6px; line-height: 1.33; } 

Script para input-small / input-large

 $('.typeahead.input-sm').siblings('input.tt-hint').addClass('hint-small'); $('.typeahead.input-lg').siblings('input.tt-hint').addClass('hint-large'); 

Jsfiddle actualizado: http://jsfiddle.net/KrtB5/542/

Hmm, parece que .form-control es una nueva clase en Bootstrap 3 RC y es el culpable de este problema (sin duda esta es solo la versión RC con muchos problemas), puedes simplemente copiar el estilo de esa clase a la clase .tt-hint . Asi que:

 .twitter-typeahead .tt-hint { display: block; height: 38px; padding: 8px 12px; font-size: 14px; line-height: 1.428571429; border: 1px solid transparent; } 

Violín de trabajo: http://jsfiddle.net/KrtB5/2/

Actualización que funciona mejor con jQuery 1.9.1 y Bootstrap 3.0.0: http://jsfiddle.net/KrtB5/13

Mira esto:

 $('#foo').typeahead(...); $('.tt-hint').addClass('form-control'); 

También hay un puerto no oficial del complemento de escritura anticipada de Bootstrap 2:

Bootstrap 3 Typeahead

Bootstrap 3 Typeahead

No requiere ningún CSS adicional y funciona con la última versión de Bootstrap.

Aquí hay una demostración en Plunker.

No solo .tt-hint es brocken, sino también otras clases CSS.

La mejor solución, que funciona en todos los navegadores, es agregar el css adicional, que repara los problemas de css entre Typeahead.js y Bootstrap 3:

https://github.com/jharding/typeahead.js-bootstrap.css

Si está utilizando bootstrap.less, lo tiene mucho más fácil. BS 3 instala MENOS 1.4.1 que ahora incluye bondad ‘extender’. vea Less y Bootstrap: cómo usar una clase span3 (o spanX [any number]) como mixin?

Extender es una característica clave para LESS ahora. Ahora puede heredar por completo (clases con nombre explícito). Así que no es necesario copiar las propiedades como en las respuestas CSS de Hieu Nguyen y Nick P. MENOS lo hará todo con:

 .twitter-typeahead .tt-hint:extend(.form-control all) {} 

El código https://github.com/jharding/typeahead.js-bootstrap.css/blob/master/typeahead.js-bootstrap.less less está roto para BS 3. Lo usé como punto de partida y también agregué el menú desplegable no se ajusta según el tipo de BS 2 por delante. Mi último archivo menos es:

 .tt-dropdown-menu { min-width: 160px; margin-top: 2px; padding: 5px 0; /* from BS dropdowns.less .dropdown-menu */ /* background-color: @dropdownBackground;*/ background-color: @dropdown-bg; /* border: 1px solid #ccc; border: 1px solid @dropdownBorder; border: 1px solid @dropdownBorder;*/ border: 1px solid @dropdown-fallback-border; // IE8 fallback border: 1px solid @dropdown-border; *border-right-width: 2px; *border-bottom-width: 2px; /*BS2 replaced with BS dropdowns.less .dropdown-menu*/ /*.border-radius(6px);*/ border-radius: 6px; /*.box-shadow(0 5px 10px rgba(0,0,0,.2)); -webkit-background-clip: padding-box; -moz-background-clip: padding;*/ .box-shadow(0 6px 12px rgba(0,0,0,.175)); background-clip: padding-box; } .tt-suggestion { display: block; padding: 3px 20px; } .tt-suggestion.tt-is-under-cursor { /*color: @dropdownLinkColorHover; #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));*/ color: @dropdown-link-hover-color; background-color: @dropdown-link-hover-bg; } .tt-suggestion.tt-is-under-cursor a { /*color: @dropdownBackground;*/ color: @dropdown-bg; } .tt-suggestion > p { margin: 0; white-space: nowrap !important; //dont conform suggestion to parent input width } /*https://stackoverflow.com/questions/18059161/css-issue-on-twitter-typeahead-with-bootstrap-3*/ .twitter-typeahead { display: block; width: 100%; //BS 3 needs this to inherit this for children } .twitter-typeahead .tt-hint:extend(.form-control all) { color: @input-color-placeholder; //show hint distinct from input } 

Una solución integral (recomendada en este informe de errores en Typeahead)

https://github.com/hyspace/typeahead.js-bootstrap3.less/blob/master/typeahead.css

 /* * typehead.js-bootstrap3.less * @version 0.2.3 * https://github.com/hyspace/typeahead.js-bootstrap3.less * * Licensed under the MIT license: * http://www.opensource.org/licenses/MIT */ .has-warning .twitter-typeahead .tt-input, .has-warning .twitter-typeahead .tt-hint { border-color: #8a6d3b; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .has-warning .twitter-typeahead .tt-input:focus, .has-warning .twitter-typeahead .tt-hint:focus { border-color: #66512c; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; } .has-error .twitter-typeahead .tt-input, .has-error .twitter-typeahead .tt-hint { border-color: #a94442; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .has-error .twitter-typeahead .tt-input:focus, .has-error .twitter-typeahead .tt-hint:focus { border-color: #843534; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; } .has-success .twitter-typeahead .tt-input, .has-success .twitter-typeahead .tt-hint { border-color: #3c763d; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .has-success .twitter-typeahead .tt-input:focus, .has-success .twitter-typeahead .tt-hint:focus { border-color: #2b542c; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; } .input-group .twitter-typeahead:first-child .tt-input, .input-group .twitter-typeahead:first-child .tt-hint { border-bottom-left-radius: 4px; border-top-left-radius: 4px; } .input-group .twitter-typeahead:last-child .tt-input, .input-group .twitter-typeahead:last-child .tt-hint { border-bottom-right-radius: 4px; border-top-right-radius: 4px; } .input-group.input-group-sm .twitter-typeahead .tt-input, .input-group.input-group-sm .twitter-typeahead .tt-hint { height: 30px; padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; } select.input-group.input-group-sm .twitter-typeahead .tt-input, select.input-group.input-group-sm .twitter-typeahead .tt-hint { height: 30px; line-height: 30px; } textarea.input-group.input-group-sm .twitter-typeahead .tt-input, textarea.input-group.input-group-sm .twitter-typeahead .tt-hint, select[multiple].input-group.input-group-sm .twitter-typeahead .tt-input, select[multiple].input-group.input-group-sm .twitter-typeahead .tt-hint { height: auto; } .input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-input, .input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint { border-radius: 0; } .input-group.input-group-sm .twitter-typeahead:first-child .tt-input, .input-group.input-group-sm .twitter-typeahead:first-child .tt-hint { border-bottom-left-radius: 3px; border-top-left-radius: 3px; border-bottom-right-radius: 0; border-top-right-radius: 0; } .input-group.input-group-sm .twitter-typeahead:last-child .tt-input, .input-group.input-group-sm .twitter-typeahead:last-child .tt-hint { border-bottom-left-radius: 0; border-top-left-radius: 0; border-bottom-right-radius: 3px; border-top-right-radius: 3px; } .input-group.input-group-lg .twitter-typeahead .tt-input, .input-group.input-group-lg .twitter-typeahead .tt-hint { height: 46px; padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 6px; } select.input-group.input-group-lg .twitter-typeahead .tt-input, select.input-group.input-group-lg .twitter-typeahead .tt-hint { height: 46px; line-height: 46px; } textarea.input-group.input-group-lg .twitter-typeahead .tt-input, textarea.input-group.input-group-lg .twitter-typeahead .tt-hint, select[multiple].input-group.input-group-lg .twitter-typeahead .tt-input, select[multiple].input-group.input-group-lg .twitter-typeahead .tt-hint { height: auto; } .input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-input, .input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint { border-radius: 0; } .input-group.input-group-lg .twitter-typeahead:first-child .tt-input, .input-group.input-group-lg .twitter-typeahead:first-child .tt-hint { border-bottom-left-radius: 6px; border-top-left-radius: 6px; border-bottom-right-radius: 0; border-top-right-radius: 0; } .input-group.input-group-lg .twitter-typeahead:last-child .tt-input, .input-group.input-group-lg .twitter-typeahead:last-child .tt-hint { border-bottom-left-radius: 0; border-top-left-radius: 0; border-bottom-right-radius: 6px; border-top-right-radius: 6px; } .twitter-typeahead { width: 100%; } .input-group .twitter-typeahead { display: table-cell !important; float: left; } .twitter-typeahead .tt-hint { color: #999999; } .twitter-typeahead .tt-input { z-index: 2; } .twitter-typeahead .tt-input[disabled], .twitter-typeahead .tt-input[readonly], fieldset[disabled] .twitter-typeahead .tt-input { cursor: not-allowed; background-color: #eeeeee !important; } .tt-dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; min-width: 160px; width: 100%; padding: 5px 0; margin: 2px 0 0; list-style: none; font-size: 14px; background-color: #ffffff; border: 1px solid #cccccc; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); background-clip: padding-box; *border-right-width: 2px; *border-bottom-width: 2px; } .tt-dropdown-menu .tt-suggestion { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.42857143; color: #333333; white-space: nowrap; } .tt-dropdown-menu .tt-suggestion.tt-cursor { text-decoration: none; outline: 0; background-color: #f5f5f5; color: #262626; } .tt-dropdown-menu .tt-suggestion.tt-cursor a { color: #262626; } .tt-dropdown-menu .tt-suggestion p { margin: 0; } 

Esto funcionó para mí. Es posible que necesite jugar con los números superiores e izquierdos para hacerlo bien.

 $('#typeahead').typeahead(...); $(".tt-hint").css('top','3px'); $(".tt-hint").css('left','1px'); 

Basado en la respuesta de Andreas, apostaría por lo siguiente con menos:

 .tt-hint { .form-control; } 

La solución que se me ocurrió fue simplemente agregar otra clase CSS (from-group-lg) a mi elemento form-group.

Mi HTML:

 

En mi archivo scss agregué:

 .form-group-lg .tt-hint { @extend .input-lg; } 

De los problemas de Typeahead con Bootstrap 3.0 RC1 : como menciona [laurent-wartel] [2], pruebe https://github.com/hyspace/typeahead.js-bootstrap3.less o https://github.com/bassjobsen/Bootstrap- 3-Escriba el encabezado para 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

Una solución menos limpia

 .tt-small { .twitter-typeahead { display: block !important; // Note: Override inline styles set by JavaScript &> .tt-hint { &:extend(.form-control); color: @medium-gray; } } } 

Donde el marcado se ve algo así como:

 

Otro enfoque para hacer que Twitter Typeahead funcione con Bootstrap 3.

 // Using jQuery, we remove the inline styles compulsively added by Twitter Typeahead. // We need to do this because, if not, styles on our stylesheets won't be able to // override those inline styles. $('.twitter-typeahead, .typeahead').attr('style',''); 

Luego, en su hoja de estilo LESS, puede agregar lo siguiente:

 // Twitter Typeahead .twitter-typeahead { position: relative; .tt-hint { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: @input-bg; border: none; } .tt-input { position: relative; vertical-align: top; } .tt-hint + .tt-input { background-color: transparent; } .tt-dropdown-menu { &:extend(.dropdown-menu all); } .tt-suggestion { &:extend(.dropdown-menu > li > a all); p { margin-bottom: 0; } } .tt-cursor { &:extend(.dropdown-menu > .active > a all); } } 

No es necesario pasar por ninguna de estas complicadas implementaciones, simplemente agregue

 style="position: relative" 

Para el elemento padre. Utiliza un posicionamiento absoluto, solo necesita saber a qué “absoluto” te refieres.