引导过滤器的下拉列表

Question

我当前正在使用最新版本的Bootstrap制作可过滤的下拉菜单。到目前为止，这是dropdown元素的样子：

<div id="options" class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
        <span id="search_text">Search</span>
        <ul>
            <li><a href="#about">About</a></li>
            <li><a href="#base">Base</a></li>
            <li><a href="#blog">Blog</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#custom">Custom</a></li>
            <li><a href="#support">Support</a></li>
            <li><a href="#tools">Tools</a></li>
        </ul>
    </button>
</div>

我想做的是：

单击下拉列表（焦点对准）时，激活keydown事件监听器，将search_text中的文本更改为用户键入的内容，并按退格键删除最后一个字符。退出下拉菜单时（模糊），请停用所述keydown侦听器。目前，我的关键事件侦听器的代码如下：

function search(evt)
{
    let key = evt.keyCode;
    let chrCode = key - 48 * Math.floor(key / 48);
    let chr = String.fromCharCode((96 <= key) ? chrCode: key);

    if (key === 8)
    {
        $("#search_text").text($("#search_text").text().slice(0, -1));
    }
    else
    {
        $("#search_text").append(document.createTextNode(chr));
    }

    var input = $("#search_text").text();
    var filter = input.value.toUpperCase();
    var options = $("#options li");

    for (var i = 0; i < options.length; i++)
    {
        var o = options[i];
        txtValue = o.textContent || o.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1)
        {
            o.style.display = "block";
        }
        else
        {
            o.style.display = "none";
        }
    }
}

当下拉菜单集中时，我应该将监听器添加到div#options还是模糊时将其删除？