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

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

    Теперь можно отправить запрос приведенному на прошлом шаге сценарию РНР из программного кода на JavaScript:

$(document).ready(function() {
  var $autocomplete = $('<ul class="autocomplete"></ul>')
  .hide()
  .insertAfter('#search-text');

  $('#search-text').keyup(function() {
      $.ajax({
        'url': '../cgi-bin/autocomplete.php',
        'data': {'search-text': $('#search-text').val()},
        'dataType': 'json',
        'type': 'GET',
        'success': function(data) {
          if (data.length) {
            $autocomplete.empty();
            $.each(data, function(index, term) {
              $('<li></li>').text(term).appendTo($autocomplete);
            });
            $autocomplete.show();
          }
          }
      });
    });
});

    В качестве события, по которому будет отправляться запрос AJAX, следует использовать keyup, а не keydown или keypress. Последние два события возникают в процессе нажатия клавиши, то есть до того как символ фактически будет добавлен к значению поля. Если для отправки запросов попробовать задействовать эти события, то список вариантов дополнения будет отставать от значения поля на один символ. Например, после ввода третьего символа в запросе AJAX будут переданы только первые два символа. Используя событие keyup, мы можем избежать этой проблемы.

    В таблице стилей мы указали, что список вариантов автодополнения будет иметь абсолютное позиционирование, поэтому он сможет накладываться на текст, находящийся ниже. Теперь при вводе строки в поле поиска мы увидим наши варианты дополнения, как показано на рисунке 1.


Рис.1. Список вариантов дополнения

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

    Для корректного отображения списка вариантов мы учли наличие механизма автодополнения, встроенного в некоторые браузеры. Браузеры часто запоминают, что вводил пользователь в поля формы, и предлагают эти варианты в следующий раз. Предлагаемый браузером список, выведенный поверх нашего собственного списка вариантов, может сбивать с толку.

    К счастью, имеется возможность запретить работу механизма автодополнения, встроенного в браузеры, установив атрибут autocomplete поля формы в значение off. Мы могли бы сделать это прямо в разметке HTML, но это привело бы к нарушению принципа прогрессивного улучшения, потому что тем самым мы отключили бы механизм автодополнения в браузере, не предложив свой собственный. Поэтому мы будем устанавливать значение данного атрибута в нашем сценарии:

  $('#search-text').attr('autocomplete', 'off');

    На следующем шаге мы продолжим изучение этого вопроса.




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