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

    На этом шаге мы рассмотрим сценарий заполнения поля поиска.

    Наш список вариантов дополнения будет не слишком полезен без возможности вставлять выбранный вариант в поле ввода. Для начала мы дадим пользователю возможность подтверждать выбор щелчком мыши:

        'success': function(data) {
          if (data.length) {
            $autocomplete.empty();
            $.each(data, function(index, term) {
              $('<li></li>').text(term).appendTo($autocomplete)
              .click(function() {
                $('#search-text').val(term);
                $autocomplete.hide();
              });
            });
            $autocomplete.show();
          }
        }


Рис.1. Занесение текста в поле поиска

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

    Данное изменение выполняет запись текста в поле поиска, когда выполняется щелчок на элементе списка. Кроме того, после щелчка мы скрываем список вариантов, так как работа с ним на этом заканчивается.

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




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