javascript - token 输入可滚动下拉列表中的键盘导航

Question

所以我有一个 token 输入可滚动下拉菜单。

据我所知，不可能开箱即用地限制它的高度并使其可滚动(当我在列表中有很多元素时)所以我添加了以下内容:

div.token-input-dropdown {
    overflow: auto;
    max-height: 150px;
}

我的问题是我无法在该列表中使用键盘正确导航。我的意思是，我可以按下向下键，下一个元素将突出显示，但当它到达底部时，内容将不会继续滚动。有谁知道如何解决这个问题？

这是一个 fiddle :http://jsfiddle.net/lav911/MfRrY/

Answer 1

您需要在 http://cdn.jsdelivr.net/jquery.tokeninput/1.6.0/jquery.tokeninput.js 更新以下函数

function select_token (token) {
    token.addClass(settings.classes.selectedToken);
    selected_token = token.get(0);

    // Hide input box
    input_box.val("");

    // Hide dropdown if it is visible (eg if we clicked to select token)
    hide_dropdown();
}

在突出显示 token.addClass(settings.classes.selectedToken); 时，您需要使 token 在 View 中可用。您可以手动调整 scrollTop 或在所选元素上使用 scrollIntoView 函数。请引用scrollIntoView对于 API。