scrollable-dropdown not working

[Crisp3333]

The example given for scrollable dropdown on the typeahead.js website will not work, you will see the results in the dropdown however no background or scroll bar for the dropdown.

CSS

#scrollable-dropdown-menu .tt-dropdown-menu {
  max-height: 150px;
  overflow-y: auto;
}

HTML

<div id="scrollable-dropdown-menu">
  <input class="typeahead" type="text" placeholder="Countries">
</div>

This can be fixed by replacing .tt-dropdown-menu with .tt-menu. That means the same styling you have for .tt-dropdown-menu just apply it to .tt-menu. I have just upgraded to v0.11.1 and found this issue. They also need to change it on the website https://twitter.github.io/typeahead.js/examples/ as it can confuse many people.

[aneeshvartakavi]

Thank you! Was pretty frustrating when the example did not work.

[devvyn]

I thought I was losing my mind…

[neil-rubens]

Thank you @Crisp3333

[ayuthmang]

That's works, thanks

[cagan]

It works. Thank you

[atifadib]

Hi Tried changing to tt-menu, did not work!! Has the code changed again?

[mantadiver]

Depending on the version it is (this is typeahead 3)... and I searched hours for this...

ul.typeahead.dropdown-menu { max-height: 150px; overflow: auto; }

[MohamedHussainSha]

typeahead 3 - also have the same problem how can i fix ?

//Below code is not working for Keyboard UP & DOWN arrows.. ul.typeahead.dropdown-menu { max-height: 150px; overflow: auto; } //This is my code...

<script type="text/javascript">
    var jsType = $.noConflict();
    jsType(function () {
        //PinCode
        jsType('[id*=txtPincode]').typeahead({
            autoSelect: true,
            highlight: true,
            minLength: 2,
            items: 'all'
    , source: function (request, response) {
        jsType.ajax({
            url: '<%=ResolveUrl("~/AutoCompleteService.asmx/GetPincode") %>',
            data: "{ 'prefix': '" + request + "'}",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                items = [];
                map = {};
                $.each(data.d, function (i, item) {
                    var id = item.split('-')[0];
                    var name = item.split('-')[1];
                    map[name] = { id: id, name: name };
                    items.push(name);
                });

            error: function (response) {
                alert(response.responseText);
            },
            failure: function (response) {
                alert(response.responseText);
            }
        });
    },
            updater: function (item) {
                jsType('[id*=hfPincode]').val(map[item].id);
                return item;
            }
        });

});