Бутстрап фильтр по выпадающему - PullRequest
0 голосов
/ 04 ноября 2019

В настоящее время я использую последнюю версию Bootstrap для создания выпадающего меню с возможностью фильтрации. Вот как сейчас выглядит выпадающий элемент:

<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 на то, что печатает пользователь, а backspace удаляет последний символ. Когда выпадающее меню закрывается (при размытии), деактивируйте указанный приемник нажатия клавиш. В настоящее время код моего ключевого слушателя событий выглядит следующим образом:

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, когда выпадающий список сфокусирован, и удалить его, когда он размыт?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...