CODEWITHSUNDEEP
jquerytwitter-bootstrapbootstrap-typeaheadtypeahead.jstwitter-bootstrap-3
javsmo
javsmo

Reputation: 1337

Typeahead problems with Bootstrap 3.0 RC1

I'm trying to use Twitter Typeahead with Bootstrap 3 RC1, because Bootstrap dropped its own typeahead plugin on version 3.

I'm using the following HTML on my form:

<div class="well">  
<form>
    <fieldset>
        <div class="form-group">
            <label for="query">Search:</label>
            <input type="text" class="form-control" name="query" id="query" placeholder="Start typing something to search...">              
        </div>
        <button type="submit" class="btn btn-primary">Search</button>
    </fieldset>
</form>
</div>

Without adding Typeahead, the search input field displays like this:

before adding Typeahead

Then I added Typeahead like this:

<script>
    $('#query').typeahead({        
        local: ['alpha', 'bravo','charlie','delta','epsilon','gamma','zulu']
    });
</script>

And the field became smaller, with a white rectangle inside it.

after adding Typeahead

when typing some text...

Am I doing something wrong or it's just a bug on Typeahead or Bootstrap 3 RC1?

Upvotes: 24

Views: 18482

Answers (5)

lukiller
lukiller

Reputation: 1207

After a lot of research with no luck at all adding styles, I finally fixed it adding one line inside the constructor Typeahead (bootstrap.js or bootstrap-typeahead.js depending on your version):

this.$menu.width(this.$element.outerWidth());

Here's the code:

/* TYPEAHEAD PUBLIC CLASS DEFINITION
 * ================================= */

var Typeahead = function (element, options) {
    this.$element = $(element)
    this.options = $.extend({}, $.fn.typeahead.defaults, options)
    this.matcher = this.options.matcher || this.matcher
    this.sorter = this.options.sorter || this.sorter
    this.highlighter = this.options.highlighter || this.highlighter
    this.updater = this.options.updater || this.updater
    this.source = this.options.source
    this.$menu = $(this.options.menu)
    this.shown = false
    this.listen()
    this.$menu.width(this.$element.outerWidth());
}

Upvotes: 0

Bass Jobsen
Bass Jobsen

Reputation: 49044

update 14 feb 2014

As mentioned by laurent-wartel try https://github.com/hyspace/typeahead.js-bootstrap3.less or https://github.com/bassjobsen/typeahead.js-bootstrap-css for additional CSS to use typeahead.js with Bootstrap 3.1.0.

Or use use the "old" (TB 2) plugin with the new Bloodhound suggestion engine: https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/26

Twitter's typeahead doesn't seem ready for Twitter's Bootstrap 3. To use Twitter's typeahead with Twitter's Bootstrap you will need some extra CSS (deprecated, no longer maintained). Using this CSS doesn't fix your problems.

In your example the input field don't get a 100% width. This will be cause by the Javascript. The javascript wraps the input in a span:

<span class="twitter-typeahead" 
    style="position: relative; display: inline-block; direction: ltr;">

This span don't got a 100% so do input inside it. To fix add to your CSS:

.twitter-typeahead {
  width: 100%;
}

The Javascript sets the background-color of your input to transparent. If you don't want to change the plugin source i will need some additional Javascript to fix this:

$('.tt-query').css('background-color','#fff');

Now is should work as expected based on your example. http://www.bootply.com/73439

update

The original question was for RC1 for Twitter's Bootstrap 3.0.0. you also need to add:

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

New bootply: http://bootply.com/86305

Upvotes: 39

Laurent W.
Laurent W.

Reputation: 3783

Have a look at typeahead.js-bootstrap3.less.

It works great with the latest version of Bootstrap (v3.0.3) and allows you to keep your custom theming. There is also a .css file with default bootstrap theming.

Upvotes: 2

3176243
3176243

Reputation: 569

Typeahead.js css fixing also have problems with input groups (corners rounding), i found somewhere info that it breaks on modals, etc. Additionaly https://github.com/jharding/typeahead.js-bootstrap.css is no longer mantained so i am going to give a try for Bass Jobsen solution ;)

Upvotes: 1

Krzysztof Wilczek
Krzysztof Wilczek

Reputation: 67

Instead Twitter Typeahead, try to use bootstrap-select. This library is integrated into the Bootstrap 3 and has a wider functionality.

Upvotes: -2

Related Questions