extendiendo el ancho de la escritura anticipada de arranque para que coincida con el campo de entrada

Sé que esta pregunta se ha hecho al menos tres veces antes, pero la respuesta que vi no era lo que estaba buscando. Estoy buscando aumentar el ancho del campo de autocompletar que genera el arranque de Twitter con su función de escritura anticipada. He estado leyendo que se extiende para cubrir todo el texto en el campo. es decir, cuanto más largo sea el texto, más ancho será el campo de autocompletar. Sin embargo, me gustaría que fuera un span6 porque así de amplio es mi campo de búsqueda. ¿Algunas ideas? He visto algunas respuestas de jquery pero no pude seguirlas.

Michael Watson dio lo que creo que es la respuesta más simple en su comentario.

.twitter-typeahead { width: 100%; } 

Actualización #1: Basado en los comentarios a continuación (gracias Steve, Vishi), haga lo mismo para .tt-hint, .tt-input, .tt-dropdown-menu.

Actualización #2: mlissner informa que .tt-dropdown-menu es ahora .tt-menupor lo que el resultado final es

.twitter-typeahead, .tt-hint, .tt-input, .tt-menu { width: 100%; }

El menú desplegable es un ul con las clases. typeahead dropdown-menu podrías usar CSS para establecer su ancho:

.dropdown-menu
{
 width: .... px;
}

El ancho de span6 no es estático, por lo que necesitará algunas consultas de medios para que responda.

Para Arranque 3 la función de escritura anticipada se elimina de TB3 en lugar de usar https://github.com/twitter/typeahead.js/. necesitarás algo CSS adicional para integrarlo con Bootstrap de Twitter.Deberá cargar CSS adicional para obtener el typeahead.js menú desplegable para adaptarse al tema predeterminado de Bootstrap. Probar LESS de Bootstrap extendido o si está buscando una versión más extendida, intente: typeahead.js-bootstrap3.less.

El menú desplegable con está configurado con la clase .tt-dropdown-menu ahora. En lugar de cambiar el CSS, también puede intentar establecer el ancho dinámico. Con escritura anticipada una clase de su etiqueta de entrada de escritura anticipada:

$('.typeahead').typeahead({})
on('typeahead:opened',function(){$('.tt-dropdown-menu').css('width',$('.typeahead').width() + 'px');});

Para hacer que el menú desplegable coincida con el ancho del campo, querrá algo como esto:

$(document).on('typeahead:opened', function(event, datum) {
  var width = $(event.target).width();
  $('.tt-dropdown-menu').width(width);
});

Pequeña mejora en lo anterior usando event.target y un detector de documentos global.

Estoy usando Bootstrap 3.2.0 con typeahead.js-bootstrap3.less y anidó la entrada en divs como este:

<div class="form-group">
    <label>my label</label>
    <div class="col-md-4">
        <div class="input-group tt-input-group">
            <input id="mytypeahead" class="form-control" />
        </div>
    </div>
</div>

También necesitaba agregar esto a mi css:

.tt-input-group {
    width: 100%;
}

Aquí hay una solución CSS pura:

Ya que .dropdown-menu se posiciona absoluto, agregando position: relative; al div que envuelve su uib-typeahead campo de entrada y configuración width: 100%; para usted .dropdown-menu lo arreglará

Tu CSS se vería así:

.typeahead-search {
    position: relative;
}

.dropdown-menu {
    width: 100%;
}

Esto es para versiones más nuevas:

.twitter-typeahead, .tt-menu 
{
  display: block !important;
}