10.3, Структура клиентской части сценария

пользователем из предложенных вариантов. Второе текстовое окно проем не дает отправить форму на дообработку на сервер при нажатии клавиши <Enter>. По умолчанию в форме с одним текстовым полем с клавишей <Enter> соотнесена отправка формы. Самый простой способ отказаться от такого поведения — добавить на страницу второе текстовое поле. Если вы до. бавляете опережающий ввод на страницу, содержащую несколько элементов формы, дополнительное окно вам не требуется. Таким образом, мы приходи^ к общей структуре HTML-документа, показанной в листинге 10.3.

Листинг 10.3. Структура HTML-страницы с опережающим вводом

<form name="Forml" AUTOCOMPLETE="off" ID="Forml">

AutoComplete Text Box: <input type="text" name="txtUserInput" /> <input type="hidden" name="txtUserValue" lD="hiddenl" />

<input type="text" name="txtlgnore" style="display:none" /> </form>

В листинге 10.3 мы добавили форму с отключенным автоматическим заполнением. Нам пришлось так сделать, чтобы браузер не помещал значения в поле при первой загрузке страницы. Описанная возможность очень удобна, но в данном случае она нарушит нашу схему опережающего ввода. Обратите внимание на то, что приведенный фрагмент используется только в Internet Explorer и не дает встроенным раскрывающимся спискам автозаполнения взаимодействовать с нашими раскрывающимися списками DHTML. Другие браузеры данный атрибут проигнорируют. Кремле того, мы добавили текстовое окно txtuserinput, скрытый элемент txtUserValue и ложное текстовое окно txtlgnore. С окном txtlgnore, используемым для предотвращения автоматической отправки формы, также соотнесен стиль CSS. согласно которому это окно невидимо. Данный результат можно получить и другими способами, но предложенный нами вариант является самым простым и быстрым решением. Итак, мы добавили в форму текстовые поля и можем писать код JavaScript.

10.3.2. JavaScript

Код JavaScript приложения с опережающим вводом выполняет три основные задачи.

•Наблюдение за действиями пользователя (вводом с помощью клавиатуры и мыши).

•Отправка данных на сервер/получение данных с сервера.

•Формирование HTML-содержимого, с которым может взаимодействовать пользователь.

Прежде чем .мы начнем кодирование, стоит подробнее остановиться на том, что же мы собираемся получить.

Когда пользователь набирает букву, становится видимым скрытый элемент span с информацией, имеющей отношение к набранной букве. На

Рис. 10.4. Приложение опережающего ввода в действии

рис. 10.4 во всех вариантах подчеркнута буква "а" — буква, присутствующая в текстовом поле. Первая позиция списка выделена. Нажимая клавиши со стрелками вверх и вниз, можно выделять другие позиции. Нажав клавишу <Enter>, вы выберете выделенный вариант. Кроме того, нужную позицию можно выбрать, щелкнув на одном из слов списка.

Из-за сложности сценария объяснение может выглядеть немного непоследовательным, поскольку для реализации опережающего ввода требуется множество функций. Одна из этих функций отслеживает ввод с клавиатуры, вторая — загружает текст и код JavaScript, третья — создает список, четвертая — подчеркивает набранные буквы и т.д. Для удобства вы можете загрузить код этого сценария с Web-сайта книги и изучать его в своем любимом редакторе.

Добавление внешнего файла JavaScript (Ajax)

Чтобы добавить в наше приложение функциональные возможности Ajax, мы должны включить в дескриптор заголовка внешний файл JavaScript net.js (см. главу 3). Этот файл содержит объект ContentLoader, позволяющий инициировать запрос Ajax без всяких проверок if-else.

<script type="textjavascript" src="net.js"></script>

Чтобы присоединить внешний файл, мы добавляем дескриптор JavaScript и включаем атрибут src, задающий внешний файл. Ссылка на файл организовывается точно так же, как ссылка на изображение или файл CSS. Названный файл определяет, как отправлять информацию на сервер, скрывая весь зависящий от браузера код за удобным интерфейсным объектом. Таким образом, мы сможем отправлять и извлекать данные с сервера, не обновляя страницу. Подключив данный файл к нашему проекту, мы можем начинать разработку опережающего ввода.

д0 умолчанию и устанавливаем значение свойства z-index, соответствующее самому верхнему слою страницы. Правило CSS также позволяет определять стиль фона и границу нашего списка, чтобы он выделялся на странице. Свойство display задается равным попе, поэтому наш элемент невидим пользователю в момент первоначальной загрузки страницы. Как только пользователь начинает вводить данные в поле с опережающим вводом, свойство display меняется, поэтому мы можем увидеть результаты.

Связывание с текстовым окном структуры опережающего ввода

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

Листинг 10.6. Создание индивидуального объекта

function SetProperties(xElem,xHidden,xserverCode, xignoreCase,xmatchAnywhere,xmatchTextBoxWidth, xshowNoMatchMessage,xnoMatchingDataMessage,xuseTimeout, xtheVisibleTime){

var props={ elem: xElem,

hidden: xHidden, serverCode: xserverCode,

regExFlags: { (xignoreCase) ? "i" : "" ), regExAny: ( (xmatchAnywhere) ? " " : " " ) , matchAnywhere: xmatchAnywhere, matchTextBoxWidth: xmatchTextBoxWidth, theVisibleTime: xtheVisibleTime, showNoMatchMessage: xshowNoMatchMessage, noMatchingDataMessage: xnoMatchingDataMessage, useTimeout: xuseTimeout

1;

AddHandler(xElem) ; return props;

Первым шагом при создании наших объектов для опережающего ввода является написание новой функции setProperties (), которая может присваивать свойства объекту. В данном примере мы будем передавать этой функции несколько параметров. В их число входит текстовое окно, с которым соотнесено средство опережающего ввода; скрытый элемент, используемый

для хранения значения; указатель URL на страницу сервера, булева переменная, указывающая игнорировать регистр при поиске; булева переменная указывающая искать текст в любом месте строки; булева переменная, указывающая отображать сообщение "нет соответствий"; отображаемое сообщениебулева переменная, определяющая, следует ли скрывать варианты по прошествии указанного периода времени; а также временной интервал, в течение которого демонстрируются варианты.

Описанный набор параметров слишком велик, чтобы передавать его функции. Мы должны взять эти параметры и присвоить их нашему объекту. Для этого используем форму записи JavaScript Object Notation (JSON) которая подробно описана в приложении Б. Ключевое слово определяется перед двоеточием, затем следует значение. Трактовка параметров ignoreCase и matchAnywhere несколько сложнее. Вместо хранения булева значения мы записываем в свойство эквивалентное регулярное выражение. В данном случае мы используем символ i для обозначения "игнорировать регистр" и " — для отметки начала строки в регулярных выражениях. Выбор такого подхода объясняется тем, что нам проще задать параметры регулярных выражений, чем использовать оператор if при каждом вызове функций.

Последним действием нашей функции является связывание с текстовым окном обработчиков событий. В данном примере мы вызываем функцию, автоматически добавляющую обработчики событий. Код этой функции будет приведен чуть ниже, а пока вызовем функцию SetProperties() для создания нашего объекта. Код, приведенный в листинге 10.7, выполняется обработчиком события onload (загрузка страницы) и позволяет задавать свойства текстового окна.

Листинг 10.7. Инициализация сценария, . Щ ^ ^ ^ ^ ^ Ш Я

Обработчики событий должны быть заданы при загрузке страницы. Следовательно, мы должно присвоить их обработчику событий window.onload, который мы создали ранее для добавления нового элемента span. В данном тримере мы используем только одно текстовое окно с опережающим вводом. Цалее нам потребуется обратиться к элементу формы, с которым мы желаем связать возможности опережающего ввода, и добавить к нему новое свойство >bj. Вместо того чтобы использовать глобальные переменные, присвоим дангому свойству наш индивидуальный объект, чтобы для получения значений с нему можно было обращаться из сценария.

В качестве ссылки используется функция SetPropertiesO. Затем мы присваиваем все параметры, созданные в листинге 10.6. Здесь важно ответить, что мы ссылаемся на два элемента формы, созданных в листинге Ю.З, и вызываем серверную страницу typeAh.eadData.aspx, созданную в листинге 10.1. Теперь, когда обработчик onload инициализировал процесс, мы можем добавлять обработчики событий, которые вызывает функция SetPropertiesO-

Обработчики событий

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

Листинг 10.8. Добавление обработчиков событий, - • ;

var

isOpera=(navigator-userAgent.toLowerCase(). indexOf{"opera")!= -1) ;

Листинг 10.8 начинается с выражения, определяющего используемый браузер. Вообще, в данном примере мы будем несколько раз использовать детектирование браузера, поскольку Opera детектирует ввод с клавиатуры не так, как другие браузеры. Указанный способ позволяет проще всего выяснить, используется ли в качестве браузера Opera, но он является не самым надежным, поскольку может имитировать поведение других браузеров.

Наша функция AddHandler () получает ссылку на текстовое окно. Эта ссылка позволяет добавлять к элементу обработчики событий onkeyup и onblur. Обработчик событий onkeyup запускает функцию GiveOptions () при отпускании клавиши клавиатуры. Следовательно, когда пользователь набирает пятибуквенное слово, функция GiveOptions запускается пять раз при отпускании клавиш.

Обработчик событий onblur, который мы связали с текстовым окном, вызывает функцию StartTimeout () (она представлена в листинге 10.19) в тот момент, когда текстовое окно выходит из фокуса. Действия, вследствие которых окно может потерять статус находящегося в фокусе, включают щелчки на других частях экрана или нажатие клавиши <ТаЬ>.

Почему мы особо обратили внимание на детектирование браузера Opera? Дело в том, что он не так реагирует на обработчик событий onkeyup, как другие браузеры, — при срабатывании onkeyup Opera не показывает значе-

396 Часть IV. Ajax в примерах

ние в текстовом окне, в которое в текущий момент вводится текст. Проо;ге.\щ решается добавлением обработчика событий onkeypress. Из приведенного кода видно, что мы проверили используемый браузер с помощью булевой переменной isOpera, а затем присвоили текстовому окну обработчик событий onkeypress. Благодаря этому обработчику событий Opera служит нашим целям так же, как и другие браузеры. Поскольку теперь мы можем детектировать то, что пользователь вводит с клавиатуры, мы можем определить какие действия требуются в функции GiveOptions ().

Обработка нажатия клавиш

Мы собираемся создать функцию GiveOptions (), которая вызывается при нажатии клавиш. Основных задач у этой функции две: определить действие в зависимости от нажатой клавиши и решить, требуется ли использовать Ajax для получения данных с сервера или можно задействовать уже имеющуюся информацию. Таким образом, функция GiveOptions () требуется для того же, что и кэширование данных, рассмотренное в разделе 10.1.1. Используя для обработки дополнительных нажатий клавиш клиентский код, мы уменьшаем потребление полосы пропускания приложением опережающего ввода. Чтобы реализовать кэш доступных вариантов, установим на стороне клиента несколько глобальных переменных. Список глобальных переменных, с которых мы начнем нашу работу, приводится в листинге 10.9.

Листинг 10.9. Глобальные переменные, используемые в проекте

Первая глобальная переменная — arrOptions — ссылается на массив, который содержит все доступные опции из запроса сервера. Следующая переменная — strLastValue — содержит последнюю строку, которая находилась в текстовом окне. Переменная bMadeRequest представляет собой булеву метку, благодаря которой мы узнаем, что запрос уже отправлен серверу (поэтому нам не нужно отправлять дополнительные запросы). Эта метка подходит для решения проблемы быстрого набора, поэтому нам не нужно вводить специальные таймеры, как в Google Suggest.

Переменная theTextBox будет содержать ссылку на текстовое окно, находящееся в фокусе, a objLastActive — ссылку на последнее активизированное текстовое окно. Таким образом определяется, требуется ли обновление набора данных при переключении пользователем текстовых окон. В нашем примере видимое текстовое окно всего одно, но если данное решение будет реализовано в окне с несколькими текстовыми окнами, нам потребуется знать, какое из них находится в фокусе. Следующая переменная. currentValueS-

Глава 10 Опережающий ввод за/

greeted, действует подобно переменной selectedlndex списка. Если ее значение равно -1, не выбирается ничего. Последняя необходимая на текущий иомент переменная — булева bNoResults. Посредством этой переменной сообщается, что результатов нет, поэтому мы можем их не искать. Переменная ^sTiming позволяет определять, запущен ли таймер на странице. Этот таймер нужен для того, чтобы скрыть от пользователя предлагаемые варианты в период бездействия.

Возможно, вы не совсем поняли роли всех этих глобальных переменных, но. начав их использовать, вы разберетесь с ними лучше. Ссылаясь на эти глобальные переменные, мы можем создать функцию GiveOptionsO, которая вызывается при нажатии клавиш в текстовом окне. Функция GiveOptions(), приведенная в листинге 10.10, позволяет определять действие, которое пользователь произвел в текстовом окне.

Листинг 10.10. Код JavaScript, отвечающий за детектирование нажатия клавиш

//О Детектировать нажатие клавиши function GiveOptions(e){

var intKey « -1; if(window.event){

intKey = event.keyCode; theTextBox = event.srcElement;

}

else{

intKey = e.which; theTextBox = e.target;

}

// © Обновить таймер if(theTextBox.obj.useTimeout){

if(isTiming)EraseTimeout();

StartTimeout();

}

II © Проверить, существует пи текст if(theTextBox.value.length == 0

&& !isOpera){

arrOptions = new ArrayO; HideTheBox(); strLastValue = "";

return false;

}

// О Определить функциональные клавиши if(objLastActive == theTextBox)(

if(intKey — 13){ GrabHighlighted(); theTextBox.blur(); return false;

}

else if(intKey == 38){ MoveHighlight(-l); return false;

}

else if(intKey == 40){ MoveHighlight(l); return false;

// © Обработать действия, соотнесенные с нажатиеы клавиш if(objLastActive != theTextBox ||

theTextBox.value

.indexOf{strLastValue) != 0 || ((arrOptions,length==0 || arrOptions.length==15 )

SS IbNoResults) || (theTextBox.value.length

<= strLastValue.length)){ objLastActive = theTextBox; bMadeRequest = true TypeAhead(theTextBox.value)

}

else iff!bMadeRequest){ BuildList(theTextBox.value);

}

// ® Записать то, что ввел пользователь strLastValue = theTextBox.value;

} _

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

Функция GiveOptionsO объявляется с параметром е, что позволяет детектировать источник события. Прежде всего нам нужно объявить локальную переменную intKey, содержащую код нажатой пользователем клавиши О. Чтобы определить, какая клавиша нажата, необходимо узнать, какой метод нужен для работы выбранного пользователем браузера. Если поддерживается свойство window.event — мы имеем дело с Internet Explorer. Чтобы по-' лучить код клавиши, применяется свойство event. keyCode, а для получения объекта, соотнесенного с текстовым окном, — свойство event.srcElement. Для получения кода клавиши в других браузерах применяется параметр е.which, ссылка на объект текстового окна находится с помощью е.target.

Далее нужно проверить, использует ли текстовое окно таймер, согласно которому окно скрывается через некоторое время ©. Для этого необходимо обратиться к свойству obj текстового окна (мы создали его ранее) и булевой переменной useTimeout. Если таймер запущен, мы останавливаем его и перезапускаем, вызывая функции EraseTimeout() и StartTimeout() (мы напишем их в разделе "Использование таймеров JavaScript").

Затем мы проверяем, имеется ли что-либо в текстовом окне ©. Если окно пусто, вызываем функцию HideTheBoxO (разрабатывается в разделе "Установка выбранного значения"), устанавливающую значение strLastValue равным null, и возвращаем значение false, чтобы выйти из функции. Если текстовое окно содержит текст, мы продолжаем выполнять функцию. До того

Глава 10. Опережающий ввод 399

как мы начнем детектирование клавиши со стрелками и <Enter>, мы должны убедиться, что текущее активизированное текстовое окно совпадает с последним активизированным текстовым окном.

Первой клавишей, за нажатием которой мы должны следить, является <Enter>. имеющая код 13 О. Нажатие клавиши <Enter> позволит нам захватить значение выбранной позиции раскрывающегося списка и поместить его Б видимое текстовое окно. Таким образом, мы вызываем функцию GrabHighlighted() (ее мы тоже напишем в разделе "Установка выбранного значения"). После этого мы снимаем фокус с текстового окна и выходим из функции.

Далее нам требуются клавиши со стрелками вверх и вниз, имеющие коды 38 и 40 соответственно. При нажатии клавиш со стрелками выделение позиции перемещается вверх-вниз по списку. Выделение, показанное на рис. 10.4, имеет вид темно-серой полоски. Нажав клавишу со стрелкой вниз, можно выделить следующую позицию списка. Подробности реализации этого процесса рассмотрены ниже, в разделе "Выделение позиции". Пока же мы просто отметим, что при нажатии клавиши со стрелкой вниз функции MoveHighlight () отправляется значение 1, а при нажатии клавиши со стрелкой вверх —'значение - 1 .

Если "особые" клавиши не нажимались, мы проверяем, требуется ли для получения значений обращение к серверу, или мы можем взять их из списка, полученного ранее ©. В этом месте мы снова используем реализованный в нашем сценарии механизм кэширования, ограничивая число обращений к серверу (а также нагрузку на сервер). Итак, с помощью различных проверок нам нужно выяснить, требуются ли новые результаты. Вначале мы определяем находится ли в фокусе в текущий момент окно, активизированное последним. Далее проверятся, что текст, в текущий момент набранный пользователем в текстовом окне, отличается от предыдущего только добавлением новых символов в конце. Если результатов для вывода на экран не найдено или наше множество результатов насчитывает не больше пятнадцати элементов, необходимо получить данные с сервера. Последняя проверка позволяет убедиться, что длина текущего значения больше предыдущего. Получать данные с сервера требуется только тогда, когда это покажет любая из проверок. В таком случае мы устанавливаем статус objLastActive для текущего текстового окна. Затем задается булево значение, показывающее, что был отправлен запрос (это нужно для того, чтобы мы не отправили несколько запросов), и вызывается функция TypeAhead(), отвечающая за захват значений.

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