bassjobsen/typeahead.js-bootstrap-css

LESS / CSS code for using typeahead.js with Bootstrap 3

Typeahead.js and Bootstrap 3

For Bootstrap 4 try typeaheadjs.css

typeahead.js

The typeahead.js library consists of 2 components: the suggestion engine, Bloodhound, and the UI view, Typeahead. The suggestion engine is responsible for computing suggestions for a given query. The UI view is responsible for rendering suggestions and handling DOM interactions. Both components can be used separately, but when used together, they can provided a rich typeahead experience.

Bootstrap 3

Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created by Mark Otto and Jacob Thornton, and maintained by the core team with the massive support and involvement of the community.

To get started, check out http://getbootstrap.com!

History

With Twitter Bootstrap 3 the typeahead plugin had been dropped. @mdo says: "in favor of folks using Twitter's typeahead. Twitter's typeahead has more features than the old bootstrap-typeahead.js and less bugs." 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. CSS and LESS are build with the latest LESS code of Bootstrap 3.1.0. Code does not introduce new mixins and only extends Bootstrap's LESS. If you search for a more extended version try: typeahead.js-bootstrap3.less.

Note also the orginal typeahead plugin still works with Bootstrap 3.

Download

• Download the latest typeaheadjs.css or typeaheadjs.less.

How to use

CSS

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">

LESS

1. Copy typeaheadjs.less into your Bootstrap's LESS folder
2. Import this file into bootstrap.less: @import "typeaheadjs.less";
3. Recompile Bootstrap

Example

Examples

Run npm install. Now the .html files can be opened standalone. Thanks to @holtkamp.

typeahead.js-bootstrap-css's Issues

It looks like typeaheadjs.css is missing a lot of stuff

See 358993f, where a bunch of important looking stuff was removed.

Support for input-group with input-group-addon element

Context
When using TypeAhead on a search element, it would be nice to display a search icon next to the <input/> element, where this fiddle shows a few approaches on how to realize that.

Problem
When using the simplest approach: an input-group with an icon wrapped in a input-group-addon, this seems to interfere with TypeAhead.

This HTML

    <div class="input-group">
        <input class="typeahead form-control" type="text" placeholder="Search...">
        <span class="input-group-addon"><i class="fa fa-search"></i></span>
    </div>

will be transformed by TypeAhead to something like:

    <div class="input-group">
        <span class="twitter-typeahead">
            <input class="typeahead form-control" type="text" placeholder="Search...">
            <div class="tt-menu">...</div>
        </span>
        <span class="input-group-addon"><i class="fa fa-search"></i></span>
    </div>

Notice that the menu that contains the suggestion becomes part of the input-group element making it:

• break the rounding of the left border of the <input/> element
• overlap the <input/> element. This makes it difficult for the user to continue its search adventure.

Would it be possible to use plain CSS to prevent the menu from overlapping?

Seems to be related to:

• twitter/typeahead.js#847
• twitter/typeahead.js#1049

UPDATE
As suggested in this comment adding style="float: none;" to the input element seems to resolve the overlapping issue for Safari, FireFox, Chrome, Internet Explorer 11, Microsoft Edge. Have not tested Internet Explorer < 11 yet.

Problems with input-group-sm / input-group-lg and input-group-addon / input-group-button

As demonstrated in some examples provided by #21, visual problems occur when combining specific input-group functionality.

Best to be explained with a screenshot.

typeahead v0.11.1

The CSS class name changed in v0.11.1, see https://github.com/twitter/typeahead.js/blob/v0.11.1/src/typeahead/www.js for details.

We will need to add lines like

.tt-menu {
&:extend(.dropdown-menu);
}

and keep .tt-dropdown-menu still there to be compatible with old versions. I will submit a pull request.

fix width

Width of the typeahead text inputs don't match with other bootstrap input

This happens at least in the sample code below. The typeahead-country text input is shorter than the last-name text input.

<div class="form-group col-sm-8">
    <label for="last-name" class="control-label">Last name</label>
    <input type="text" class="form-control" required name="last-name" id="last-name" placeholder="Last name">
</div>

<div class="form-group col-sm-8">
    <label for="country" class="control-label">Country</label>
    <input type="text" class="form-control" required name="country" id="country" placeholder="Country">
</div>
<script>$('#country').typeahead(/*options*/)</script>

In case this happens all the time, how about adding the following rule to the less file to fix the issue ?

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

Alignment issue with input-group-btn

In reference to issue #22 , when I attempt to use an input-group-btn with Typeahead, the button does not align properly with the textbox. Add-ons work fine.

Here is the code:

<div class="form-group">
     <div class="input-group">
        <input type="text" id="TextboxTeamName" class="typeahead form-control" autocomplete="off" />
        <span class="input-group-btn">
            <button id="teamsearchbtn" type="button" class="btn btn-default"><i class="hci hci-search"></i></button>
        </span>
    </div>
</div>

Which renders as:

<div class="form-group">
     <div class="input-group">
        <span class="twitter-typeahead" style="position: relative; display: inline-block;">
            <input type="text" id="TextboxTeamName" class="typeahead form-control tt-input" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top;"><pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre><div class="tt-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;"><div class="tt-dataset tt-dataset-teams"></div></div>
        </span>
        <span class="input-group-btn">
            <button id="teamsearchbtn" type="button" class="btn btn-default"><i class="hci hci-search"></i></button>
        </span>
     </div>
</div>

I am using the latest version of Bootstrap, Typeahead, and this CSS. There is no custom CSS.

I can fix this issue by adding a 'form-control' class to the button element (which, I feel, I shouldn't have to), but then the button corners become square:

You can add .min?

Please add typeaheadjs.min.css

typeaheadjs.less doesn't set the tt-cursor styles

So I added this

span.twitter-typeahead {
  .tt-suggestion.tt-cursor > p {
    &:extend(.dropdown-menu > .active > a);
  }
}

BTW, thumbs up on using LESS extend to solve this problem in the first place

Add to Bower

Would make it much easier for us. I'm sure many copy-paste the less into their projects, but I like many prefer to take this as a dependency through Bower. If it works I don't want to fiddle with it, just include it and that's one less thing to worry about.

The other typeahead plugin stylesheet already provides Bower support, but their stylesheet is overkill.

Thanks.

Bower package name error?

Your bower.json (https://github.com/bassjobsen/typeahead.js-bootstrap-css/blob/master/bower.json#L2) say that the name of this package is typeahead.js-bootstrap3.less but correct bower name is typeahead.js-bootstrap-css. No?

Doesn't play well with form controls and input group addons

I have seen this issue being addressed (and resolved?), but it doesn't seem to work for me.

I'm using this widget with Bootstrap 3.3.5 and my form is horizontal. Given this markup

once initialized, it produced a duplicate of the INPUT field (note: the addon's hidden class is removed once a value is set to it, from client-side JS)

But regardless, I get this superb layout!

I will try to find a solution myself, but thought to mark this as an issue, first. Just in case someone might have an answer before I do.

Please specify the license the code is released under.

GPL with CSS is iffy

What does it even mean to "distribute the sources" for a site using a GPL'd CSS file?

Please consider switching to a less ambiguous license, like BSD, MIT, Apache or Creative Commons. The GPL is intended for source code. Using it for scripts or theming creates confusion.

I have a website. Its PHP code is not open source. Can I use this CSS with it? The CSS is distributed in source form, but the "source code" of the site is not. Not even the FSF have stated clearly whether this is permissible.

Does not work in modals

Positions as defined in the css are respected, but background/ border is missing:

Not published to NPM registry?

When trying to install using NPM it seems to fail:

npm install typeahead.js-bootstrap-css --save-dev
npm ERR! 404 Registry returned 404 for GET on https://registry.npmjs.org/typeahead.js-bootstrap-css
npm ERR! 404 
npm ERR! 404 'typeahead.js-bootstrap-css' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)

You seem to have plenty of other packages registered: https://www.npmjs.com/~bassjobsen. Did you not publish on purpose?

List Position Error when using bootstrap has-feedback has-error styling dynamically

I have added typeahead to an email input and wanted to customize this to suggest domains. Anyhow I am not able to get typeahead suggestions to align correctly with my input.
This is my html
<div id="emailFormGroup" class="form-group">
<label for="email">Email</label>
<input type="email" id="email" autocomplete="off" name="email" class="form-control" dataprovide="typeahead" placeholder=" [email protected] ">
<span id="email-feedback" class="form-control-feedback hide" aria-hidden="true"><i id="valid-msg-email" class="fa fa-check hide"></i><i id="invalid-msg-email" class="fa fa-times hide"></i></span>
</div>

I add classes has-feedback and has-error dynamically according to user input
This makes the typeahead list to jump around when the styling changes.

It rectifies when the styling stays the same

update to typeahead 0.11.1?

typeahead.js#~0.10.0 which resolved to 0.10.5 and is required by typeahead.js-bootstrap3.less#0.2.3