Install typeahead in Bootstrap 3, fix css overlay bug and width 100

In Twitter Bootstrap (version 3), typeahead has been dropped. For use this, you must install Twitter Typeahead over bootstrap.

 

1) Install bootstrap

First install bootstrap normally, with jQuery (necessary for using bootstrap), inserting this code in HEAD tag:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

without forget the viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

2) Install typeahead.js

For install typeahead.js insert this code:

<link href="//raw.github.com/jharding/typeahead.js-bootstrap.css/master/typeahead.js-bootstrap.css" rel="stylesheet" media="screen">
<script src="//twitter.github.com/typeahead.js/releases/latest/typeahead.min.js"></script>

NOTE: download the file //raw.github.com/jharding/typeahead.js-bootstrap.css/master/typeahead.js-bootstrap.css before importing

 

3) Use typeahead

Typeahead.js is installed. For use this, try to insert this script code:

$(document).ready(function() {
     $('.cities.typeahead').typeahead({
          name: "cities",
          local: ['italy', 'france', 'england', 'united states', 'brazil', 'spain']
     });
});

and in HTML code create a input text with .cities and .typeahead classes:

<input type="text" class="cities typeahead" id="citiesInput" />

this is the result:

But there is a bug, when you write something, the overlay of suggestions is out-of-line with textfield

 

4) Resolve overlay css bug

For to resolve the overlay css bug, insert this css (after other css imports):

.twitter-typeahead .tt-hint {
    display: block;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    border: 1px solid transparent;
    border-radius:4px;
}
.twitter-typeahead .hint-small {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
    line-height: 1.5;
}
.twitter-typeahead .hint-large {
    height: 45px;
    padding: 10px 16px;
    font-size: 18px;
    border-radius: 6px;
    line-height: 1.33;
}

and this is the result of the bug fix:

 

5) Set width of input text to 100%

For set width of input text to 100% of its container, for example for use form-control class, insert this css code (ever after css imports):

.twitter-typeahead {
     width: 100%;
}
.tt-dropdown-menu {
     width: 100%;
}
.tt-hint {
     width: 100%;
}

and this is the final result:

Aurelio Merenda

I live in Florence (Italy). I graduated in IT in 2010, I work as Front End Developer in Buongiorno, a NTT Docomo Group company. I specialize in Javascript & AngularJS. I like photography, movies and cats.

  • Sajjad Shirazy

    thanks.with this comletes.

    .tt-hint {
    width: “100%”;
    }

    • http://www.aureliomerenda.com/ aureliome

      thank you very much, I add this

  • Savvas Nicholas

    This still does not work for class=”input-lg”

    • http://www.aureliomerenda.com/ aureliome

      I have added .input-lg to the text field.

      I try to change “font-size” and “padding” properties of .tt-hint and it’s ok with these new properties:

      font-size: 18px; (from 14px)
      padding: 10px 16px 0; (from 6px 12px)

      This is the example: http://jsfiddle.net/99ddK/

  • Andrei K.

    Just add second line…
    $(‘#foo’).typeahead(…);
    $(‘.tt-hint’).addClass(‘form-control’); or +others like ‘input-sm’

  • Dejan Zelic

    Worked great for me! Thank you

  • Oli Norwell

    Brilliant, this has made my night, thanks so much for posting!