Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Mixing Typeahead.js and Bootstrap 3

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'
  });
});
like image 881
Some User Avatar asked Apr 26 '16 11:04

Some User


People also ask

What is bootstrap typeahead?

The typeahead input fields are very popular in modern web forms. The main purpose of using typeahead is to improve the user experience by supplying hints or a list of possible choices based on the text they've entered while filling a form or searching something — like the Google instant search.

What is typeahead dropdown?

To help a user make a selection in a long list, a dropdown typeahead shows suggestions as soon as the user starts typing.

What is typeahead jQuery?

by Tom Bertrand. jQuery plugin that provides Typeahead (autocomplete) Search preview from Json object(s) via same domain Ajax request or cross domain Jsonp and offers data compression inside Local Storage. The plugin is built with a lot of options and callbacks to allow customization.


2 Answers

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:

<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

like image 146
Cláudio Alves Avatar answered Sep 26 '22 10:09

Cláudio Alves


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.

like image 39
chazsolo Avatar answered Sep 25 '22 10:09

chazsolo