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'
});
});
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.
To help a user make a selection in a long list, a dropdown typeahead shows suggestions as soon as the user starts typing.
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.
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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With