Mixing Typeahead.js and Bootstrap 3

Question

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:

Click to copy

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

Click to copy

$(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'
  });
});

Answer 1

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

JSFiddle: https://jsfiddle.net/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:

Click to copy

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

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

Answer 2

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.