Typeahead.js interferes with Bootstrap input groups

bootstrap typeahead
typeahead bootstrap 4
bootstrap autocomplete
typeahead javascript example
jquery typeahead
bootstrap typeahead multiple select example
typeahead css
bootstrap 3 typeahead

How do I keep Typeahead.js from splitting up my Twitter Bootstrap 3 input groups? Whenever I point the Typeahead javascript at a text area that's part of an input group, the joined text area and submit button stop being joined. Is this something that's just a bug in Typeahead, or is there a workaround for this?

Without loading Typeahead.JS:

With Typeahead.JS:

My original HTML:

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

This is what Typeahead does to this 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>

This project partially solved the issue for me: https://github.com/hyspace/typeahead.js-bootstrap3.less

The only outstanding problem is when I apply shadow effect to both the .btn and .form-control the shadow is drawn also between the input field and the button.

Styles break when I use input group · Issue #1 · bassjobsen , When using the simplest approach: an input-group with an icon wrapped in a input-group-addon , this seems to interfere with TypeAhead. LESS / CSS code for using typeahead.js with Bootstrap 3 - bassjobsen/typeahead.js-bootstrap-css


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

bassjobsen/typeahead.js-bootstrap-css, How do I keep Typeahead.js from splitting up my Twitter Bootstrap 3 input groups​? Whenever I point the Typeahead javascript at a text area that's part of an input  When using TypeAhead on a search element, it would be nice to display a search icon next to the <input/> element, where this fiddle shows a few approaches on how to realize that. Problem When using the simplest approach: an input-group with an icon wrapped in a input-group-addon, this seems to interfere with TypeAhead. This HTML


Bootstrap v4 solution:

.input-group > .twitter-typeahead {
   flex: 1 1 auto;
   width: auto;
}

Typeahead.js interferes with Bootstrap input groups, How do I keep Typeahead.js from splitting up my Twitter Bootstrap 3 input groups​? Whenever I point the Typeahead javascript at a text area  bassjobsen / typeahead.js-bootstrap-css. Watch 14 Star 191 Fork 130 Code. Issues 3. Pull requests 0. Alignment issue with input-group-btn #24. Closed


This fixes the problem when the left-hand side of the text box is square (not rounded):

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

Javascript · Bootstrap, Both bootstrap.js and bootstrap.min.js contain all plugins in a single file. When using tooltips and popovers with the Bootstrap input groups, you'll have to set the container (documented A workaround for this is to use autocomplete="off" . Dismiss Join GitHub today. GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.


maybe?

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

Bootstrap Typeahead CSS, <h3>Bootstrap Typeahead CSS</h3>. 5. <form>. 6. <div class="form-group typeahead"> <input type="text" class="form-control typeahead-input" id="​addFilter"  Tip: Set autocomplete="off" for the input box if you want to prevent default browser menus from appearing over the Bootstrap type-ahead dropdown. Creating Twitter Typeahead External Dataset You can also specify external dataset through a URL pointing to a JSON file containing an array of datums.


How to Create Typeahead in Bootstrap 4, Learn how to use Bootstrap typeahead plugin to add autocomplete feature to any text input List Groups Bootstrap Forms Bootstrap Custom Forms Bootstrap Input Groups The typeahead input fields are very popular in modern web forms. first download typeahead.js from here — http://twitter.github.io/typeahead.js/ and​  Input group. Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.


Typeahead.js interfere nos grupos de entrada do Bootstrap, Typeahead.js interfere nos grupos de entrada do Bootstrap <div class="input-​group"> <input type="text" id="tags" class="form-control" name="q"> <div  Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor. Bootstrap 4 with Twitter Typeahead and Material design - JSFiddle - Code Playground Close


Pro SharePoint 2013 Branding and Responsive Web Development, Registration form bootstrap typeahead Date.js library, 388 document ready function, 386 GetOpenHouseEvents, 386–387 ISO format, 388 modification, 388–​389  Twitter's typeahead has more features than the old bootstrap-typeahead.js and less bugs." Twitter's typeahead don't work direct with Bootstrap 4. The DOM structure of the dropdown menu used by `typeahead.js` differs from the DOM structure of the Bootstrap dropdown menu.