Шаг 177.
Библиотека jQuery. Интерактивные формы. Компактные формы. Функция автодополнения на основе технологии AJAX. Удаление списка вариантов

    На этом шаге мы рассмотрим скрытие созданного списка вариантов.

    Нам осталось внести в реализацию функции автодополнения последнее усовершенствование. Мы должны обеспечить сокрытие списка, когда пользователь решит выполнить на странице какое-либо другое действие. Прежде всего мы можем среагировать на нажатие клавиши 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. Удаление списка вариантов

Полный текст этого примера можно взять здесь.

    На следующем шаге мы рассмотрим автодополнение и оперативный поиск.




Предыдущий шаг Содержание Следующий шаг