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