Twitter’s typeahead.js suggestions are not styled (have no border, transparent background, etc.)

I’m using twitter’s typeahead.js 0.9.3 and it seems my suggestions are not styled at all.

I’m getting this:

Instead of something like this: (taken from examples page)

JavaScript enabling typeahead:

$('.search-typeahead').typeahead({
    name: 'videos',
    remote: {
        url: '/api/v1/internal/videos/typeahead?text=%QUERY'
    }
});

HTML input element:

<input type="text" value="" id="search_keywords" class="no-clear search-typeahead"/>

Additional Notes:

The site I’m working on has jQuery 1.10.1 and does not use twitter bootstrap. There is a bunch of CSS that I didn’t write and thus am not familiar with which I fear is interfering, however it seems the plugin adds its own styles (there is no accompanying .css file) so shouldn’t it theoretically override things? I’m confused why my styles work, but those added by the plugin do not, resulting in an suggestions with transparent backgrounds, no borders, etc.

Answer

So looking into the docs I now see:

By default, the dropdown menu created by typeahead.js is going to look ugly and you’ll want to style it to ensure it fits into the theme of your web page.

My solution was thus to copy the styling from the example I wished to replicate:

.tt-query, /* UPDATE: newer versions use tt-input instead of tt-query */
.tt-hint {
    width: 396px;
    height: 30px;
    padding: 8px 12px;
    font-size: 24px;
    line-height: 30px;
    border: 2px solid #ccc;
    border-radius: 8px;
    outline: none;
}

.tt-query { /* UPDATE: newer versions use tt-input instead of tt-query */
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    color: #999;
}

.tt-menu { /* UPDATE: newer versions use tt-menu instead of tt-dropdown-menu */
    width: 422px;
    margin-top: 12px;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px;
}

.tt-suggestion.tt-is-under-cursor { /* UPDATE: newer versions use .tt-suggestion.tt-cursor */
    color: #fff;
    background-color: #0097cf;

}

.tt-suggestion p {
    margin: 0;
}