На этом шаге мы рассмотрим скрытие созданного списка вариантов.
Нам осталось внести в реализацию функции автодополнения последнее усовершенствование. Мы должны обеспечить сокрытие списка, когда пользователь решит выполнить на странице какое-либо другое действие. Прежде всего мы можем среагировать на нажатие клавиши Escape в обработчике события keyup и дать пользователю возможность ликвидировать список таким способом:
else if (event.keyCode == 27 && selectedItem !== null) {
// Пользователь нажал клавишу escape.
setSelectedItem(null);
}
Еще более важно скрывать список, когда поле поиска теряет фокус ввода. Первая версия реализации этой особенности выглядит очень просто:
$('#search-text').blur(function(event) {
setSelectedItem(null);
});
Однако она обладает нежелательным побочным эффектом. Так как в результате щелчка мышью на элементе списка поле ввода теряет фокус, будет вызван данный обработчик, который скроет список. Это означает, что наш обработчик события click, определенный ранее, никогда не будет вызван, в результате чего станет невозможно взаимодействовать со списком с помощью мыши.
Данная проблема не имеет простого решения. Обработчик события blur всегда вызывается перед обработчиком события click. Обходное решение заключается в том, чтобы скрывать список, когда поле теряет фокус ввода, но откладывать эту операцию на долю секунды:
$('#search-text').blur(function(event) {
setTimeout(function() {
setSelectedItem(null);
}, 250);
});
Это даст обработчику события click элемента списка шанс отработать прежде, чем список будет скрыт.
Рис.1. Удаление списка вариантов
На следующем шаге мы рассмотрим автодополнение и оперативный поиск.
