Typeahead - 可滚动的下拉菜单答案

【问题标题】：Typeahead - Scrollable Dropdown MenuTypeahead - 可滚动的下拉菜单
【发布时间】：2016-02-07 12:59:43
【问题描述】：

看起来 CSS 不适用于我的 Typeahead。我正在尝试重现可滚动的下拉菜单，如 https://twitter.github.io/typeahead.js/examples

这是我的代码：

var productList = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('PART_NO'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            //Maybe I need a prefetch
           // prefetch: '../data/films/post_1960.json',
            remote: {
                url: 'getProducts/%QUERY',
                wildcard: '%QUERY'
            }
        });

        $('#scrollable-dropdown-menu .typeahead').typeahead(null, {
            name: 'PARTS',
            limit: 10,
            display: 'PART_NO',
            source: productList
        });

CSS

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

我看不到 .tt-dropdown-menu 在哪里？

干杯，

米克

【问题讨论】：

标签： typeahead.js typeahead

【解决方案1】：

看到这个GitHub issue。可滚动下拉示例存在问题。

将您的 CSS 更新为：

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

【讨论】：

【解决方案2】：

试试这个

document.addEventListener("keydown", function (e) {
document.getElementById(e.target.attributes['aria- 
           activedescendant'].value).scrollIntoView(true)});

【讨论】：