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