На этом шаге мы рассмотрим реализацию сценария на стороне клиента.
Теперь можно отправить запрос приведенному на прошлом шаге сценарию РНР из программного кода на 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');
На следующем шаге мы продолжим изучение этого вопроса.
