I have implemented the Twitter Type Ahead on my page and it looks great. But for some reason when I arrow down the list of suggestions, the items are not highlighted, but they populate the text box. However, when I hover over the drop down of suggestions with my mouse, the items are highlighted. Is there a reason why the items would not highlight when arrow'd through? If so, how can I accomplish this?

myTypeahead= $('#txtBox').typeahead({
            name: 'typeahead',
            valueKey: "Value",
            remote: 'serviceHander.ashx',
            template: ['<p>{{Value}}</p>'],
            engine: Hogan,
        });

I have implemented the Twitter Type Ahead on my page and it looks great. But for some reason when I arrow down the list of suggestions, the items are not highlighted, but they populate the text box. However, when I hover over the drop down of suggestions with my mouse, the items are highlighted. Is there a reason why the items would not highlight when arrow'd through? If so, how can I accomplish this?

myTypeahead= $('#txtBox').typeahead({
            name: 'typeahead',
            valueKey: "Value",
            remote: 'serviceHander.ashx',
            template: ['<p>{{Value}}</p>'],
            engine: Hogan,
        });

• javascript
• jquery
• twitter
• bootstrap-typeahead

2 Answers 2

Selected suggestion gets the class .tt-cursor.

.tt-cursor{
    color:#f1b218;
}

Found the answer.

Turns out that my CSS properties were getting inherited and I had to set the .tt-is-under-cursor explicitly like so:

.tt-is-under-cursor {
    background-color: #000000!important;
    color: #FFFFFF !important;
}

UPDATE

The class has been renamed to .tt-cursor

Example:

.tt-cursor {
    background-color: #000000!important;
    color: #FFFFFF !important;
}