I have an app that uses Bootstrap 3 and Typeahead. For some reason, as soon as I add Typeahead.js, the styling gets misformatted, you can see with this JSFiddle. The following HTML looks great:

<div class="container" style="padding:3rem;">
<form class="form-horizontal">
  <div class="form-group">
    <div class="input-group">
      <input type="search" class="form-control" id="myQuery">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span id="searchIndexButton">Item 1</span> <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>
      </div>
    </div>                            
  </div>
</form>                    
</div>

As soon as I initialize it with Typeahead as shown below, it looks terrible.

$(function() {
  var data = [
    { id:1, name:'Tiger' },
    { id:2, name:'Bear' }
  ];

  var bh = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: data
  });

  $('#myQuery').typeahead(null, {
    minLength: 1,
    name: 'suggestions',
    source: bh,
    display: 'name'
  });
});

I have an app that uses Bootstrap 3 and Typeahead. For some reason, as soon as I add Typeahead.js, the styling gets misformatted, you can see with this JSFiddle. The following HTML looks great:

<div class="container" style="padding:3rem;">
<form class="form-horizontal">
  <div class="form-group">
    <div class="input-group">
      <input type="search" class="form-control" id="myQuery">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span id="searchIndexButton">Item 1</span> <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li>Item 1</li>
          <li>Item 2</li>
        </ul>
      </div>
    </div>                            
  </div>
</form>                    
</div>

As soon as I initialize it with Typeahead as shown below, it looks terrible.

$(function() {
  var data = [
    { id:1, name:'Tiger' },
    { id:2, name:'Bear' }
  ];

  var bh = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: data
  });

  $('#myQuery').typeahead(null, {
    minLength: 1,
    name: 'suggestions',
    source: bh,
    display: 'name'
  });
});

• javascript
• jquery
• twitter-bootstrap-3
• typeahead.js

• If you add in .twitter-typeahead { width: 100%; margin-top: 4px; } you get something closer to the original. – JonSG Commented May 1, 2016 at 17:20
• @JonSG - Unfortunately, that did not work for m. – Some User Commented May 5, 2016 at 11:53

2 Answers 2

If you include this CSS code for using typeahead.js with Bootstrap 3, the HTML will look as expected without modifications:

JSFiddle: https://jsfiddle/2j94perk/

Twitter's typeahead don't work direct with Bootstrap 3. The DOM structure of the dropdown menu used by typeahead.js differs from the DOM structure of the Bootstrap dropdown menu. You'll need to load some additional CSS in order to get the typeahead.js dropdown menu to fit the default Bootstrap theme. You can download the basic CSS here, or use the LESS file to integrate it into your project.

Include the CSS file after Bootstrap's CSS in your HTML:

<link href="bootstrap-3.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="typeaheadjs.css" rel="stylesheet">

Source: https://github./bassjobsen/typeahead.js-bootstrap-css

If you inspect the DOM with typeahead initialized you should notice that the script wraps the <input> with a <span>. Bootstrap is expecting a certain structure which is no longer the same after typeahead runs.