javascript - suggest - typeahead bootstrap example ajax

Typeahead.js interfiere con los grupos de entrada Bootstrap

Question

¿Cómo puedo evitar que Typeahead.js divida mis grupos de entrada de Twitter Bootstrap 3? Cuando apunto el javascript de Typeahead a un área de texto que es parte de un grupo de entrada, el área de texto unido y el botón de enviar dejan de unirse. ¿Es esto algo que solo es un error en Typeahead, o hay una solución para esto?

Sin cargar Typeahead.JS:

Con Typeahead.JS:

Mi HTML original:

    <div class="col-sm-4 hidden-xs">
    <form class="navbar-form" role="search">
        <div class="input-group">
        <input type="text" id="tags" class="form-control" name="q">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit">Search</button>
            </div>
        </div>
    </form> 
    </div>

Esto es lo que hace Typeahead a este HTML:

<div class="col-sm-4 hidden-xs">
        <form class="navbar-form" role="search">
            <div class="input-group">
            <span class="twitter-typeahead" style="position: relative; display: inline-block;">
            <input type="text" class="form-control tt-hint" disabled="" autocomplete="off" spellcheck="false" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 255, 255); background-image: none; background-origin: padding-box; background-size: auto; background-position: 0% 0%; background-repeat: repeat repeat;">
            <input type="text" id="tags" class="form-control tt-input" name="q" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;">
            <pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: nowrap; font-family: ''Helvetica Neue'', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;">
            </pre>
            <span class="tt-dropdown-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;"><div class="tt-dataset-0"></div>
            </span>
            </span>
                <div class="input-group-btn">
                    <button class="btn btn-default" type="submit">Search</button>
                </div>
            </div>
        </form> 
        </div>

Answer 1

¿tal vez?

.twitter-typeahead > .form-control{ width: inherit !important; }

Answer 2

Este proyecto resolvió parcialmente el problema para mí: project

El único problema pendiente es cuando aplico el efecto de sombra tanto a .btn como a .form-control, la sombra se dibuja también entre el campo de entrada y el botón.

Answer 3

Esto soluciona el problema cuando el lado izquierdo del cuadro de texto es cuadrado (no redondeado):

.input-group .twitter-typeahead .form-control:not(:first-child):not(:last-child) {
  border-radius: 4px 0px 0px 4px;
}

Answer 4

.twitter-typeahead{ float:left; width:100%}