typeahead.js problems with Bootstrap 3

Typeahead.js 0.9.3 does not work out of the box with Bootstrap 3.

by Chloe Lo

HTML

<link rel="stylesheet" href="http://proverbs8.co.nf/CSS/bootstrap.min.css">
<script src="http://proverbs8.co.nf/JS/bootstrap.min.js"></script>
<div class="container">
    <div id="content" class="row">
        <div id="search_box" class="clearfix col-lg-8">
            <form id="search_form">
                <div class="form-group input-group input-group-lg">
                    <span class="input-group-addon">Hey</span>
                    <input type="text" class="form-control" autocomplete="off" autofocus />
                </div>
                <div class="form-group input-group input-group-lg"> <span class="input-group-addon">Hey, typeahead!</span>
                    <input id="typeahead" type="text" data-provide="typeahead" class="form-control" autocomplete="off" />
                </div>
            </form>
        </div>
        <div class="col-lg-4 hidden-sm text-muted">
            <p id="info">Text</p>
        </div>
    </div>
</div>

CSS

.twitter-typeahead {
  width: 100%;
  position: relative;
}
.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
  margin: 0;
  width: 100%;
  color: #555555;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.has-warning .twitter-typeahead .tt-query,
.has-warning .twitter-typeahead .tt-hint {
  border-color: #c09853;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-error .twitter-typeahead .tt-query,
.has-error .twitter-typeahead .tt-hint {
  border-color: #b94a48;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-success .twitter-typeahead .tt-query,
.has-success .twitter-typeahead .tt-hint {
  border-color: #468847;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.twitter-typeahead .tt-query:focus,
.twitter-typeahead .tt-hint:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.has-warning .twitter-typeahead .tt-query:focus,
.has-warning .twitter-typeahead .tt-hint:focus {
  border-color: #a47e3c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
}
.has-error .twitter-typeahead .tt-query:focus,
.has-error .twitter-typeahead .tt-hint:focus {
  border-color: #953b39;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
  box-shadow: inset...

JavaScript

/*!
 * typeahead.js 0.9.3
 * https://github.com/twitter/typeahead
 * Copyright 2013 Twitter, Inc. and other contributors; Licensed MIT
 */

! function (a) {
    var b = "0.9.3",
        c = {
            isMsie: function () {
                var a = /(msie) ([\w.]+)/i.exec(navigator.userAgent);
                return a ? parseInt(a[2], 10) : !1
            },
            isBlankString: function (a) {
                return !a || /^\s*$/.test(a)
            },
            escapeRegExChars: function (a) {
                return a.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&")
            },
            isString: function (a) {
                return "string" == typeof a
            },
            isNumber: function (a) {
                return "number" == typeof a
            },
            isArray: a.isArray,
            isFunction: a.isFunction,
            isObject: a.isPlainObject,
            isUndefined: function (a) {
                return "undefined" == typeof a
            },
            bind: a.proxy,
            bindAll: function (b) {
                var c;
                for (var d in b) a.isFunction(c = b[d]) && (b[d] = a.proxy(c, b))
            },
            indexOf: function (a, b) {
                for (var c = 0; c < a.length; c++) if (a[c] === b) return c;
                return -1
            },
            each: a.each,
            map: a.map,
            filter: a.grep,
            every: function (b, c) {
                var d = !0;
                return b ? (a.each(b, function (a, e) {
                    return (d = c.call(null, e, a, b)) ? void 0 : !1
                }), !! d) : d
            },
            some: function (b, c) {
                var d = !1;
                return b ? (a.each(b, function (a, e) {
                    return (d = c.call(null, e, a, b)) ? !1 : void 0
                }), !! d) : d
            },
            mixin: a.extend,
            getUniqueId: function () {
                var a = 0;
        ...