TypeaheadでCSSが機能していないようです。 https://Twitter.github.io/typeahead.js/examples のようにスクロール可能なドロップダウンメニューを再現しようとしています。
これが私のコードです:
JS
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がどこにあるのかわかりませんか?
乾杯、
ミック
これを参照してください GitHubの問題 。スクロール可能なドロップダウンの例に問題があります。
CSSを次のように更新します。
#scrollable-dropdown-menu .tt-menu {
max-height: 150px;
overflow-y: auto;
background-color: red;
}
これを試して
document.addEventListener("keydown", function (e) {
document.getElementById(e.target.attributes['aria-
activedescendant'].value).scrollIntoView(true)});