В этой главе мы уже говорили о том, как организовать отобр выпадающего списка с помощью кода HTML и CSS. Теперь наша j состоит в том, чтобы создавать код HTML программным путем и i нять к нему каскадные таблицы стилей для создания полной i выпадающего списка. Прежде всего нам потребуется свойство, в i ром будет храниться ссылка на элемент , поскольку раз методы AutoSuggestCont rol требуют возможности доступа к нему.! свойство с именем layer будет инициализироваться значением пи
function AutoSuggestControl(oTextbox, oProvider) { this.layer = null; this.provider = oProvider; this.textbox = oTextbox; this.init();
)
Собственно созданием выпадающего списка мы займемся после 1 как определим ряд простых методов, которые помогут управ поведением. Ниже следует самый простой метод hideSuggestions'J торый должен скрывать список:
AutoSuggestControl.prototype.hideSuggestions = function () { ,
this.layer.style.visibility = "hidden";
Далее следует метод, который будет заниматься выделением текущей подсказки в выпадающем списке. Метод highlightSugge принимает в качестве аргумента ссылку на элемент , coj щий текущую подсказку. Цель метода состоит в том, чтобы i в атрибут class элемента с текущей подсказкой имя кла current и очистить этот атрибут для всех остальных элементов < Таким образом создается иллюзия выделения одного пункта i как в обычных приложениях. Алгоритм работы очень прост: обойти все дочерние узлы элемента layer, и, если ссылка на оче узел совпадает со значением входного аргумента, то в атрибут cl писать строку current, в противном случае - пустую строку:
AutoSuggestControl.prototype.highlightSuggestion = function (oSuggestio for (var i=0; i < this.layer.childNodes.length; i++) { var oNode = this.layer,childNodes[i]; . . if (oNode == oSuggestionNode) {
oNode.className = "current" ' " } else if (oNode.className == "current") { oNode.className = "";
Теперь вспомогательные методы определены, и можно приступить к созданию выпадающего списка внутри элемента . Метод сгеа-teDropDown() создает объемлющий элемент и назначает обработ¬чики различных событий, возникающих в нем. Сам элемент создается с помощью метода createElementO, после чего устанавлива¬ются значения свойств, определяющих стиль отображения:
AutoSuggestControl.prototype.createDropDown = function () {
this, layer = document.createElement("div");
fi, .this, layer. className = "suggestions"; v,
I".- this.layer.style.visibility = "hidden"; "-•1" this.layer.style,width'= this.textbox.offsetWidth; sU"' document.body.appendChild(this.layer);
, // здесь находится остальной код

В этом методе сначала создается элемент , ссылка на который за¬писывается в свойство layer. Затем в свойство className (эквивалент ат¬рибута class) записывается имя класса CSS suggestions, что совершенно необходимо для корректной работы элемента. В следующей строке этот алемент делается невидимым, т. к. изначально он должен быть скрыт. Далее ширина списка устанавливается равной ширине текстового по¬ля, для чего значение ширины извлекается из свойства текстового поля off setWidth (это совершенно необязательно, и вы можете изменить зна¬чение ширины). И наконец, в последней строке элемент вставляется в документ. Создав элемент, можно назначить обработчики событий.
Теперь нам необходимо предусмотреть реакцию выпадающего списка в ответ на манипуляции пользователя с мышью. Так, если выпадаю¬щий список видим, установка указателя мыши на подсказку должна приводить к ее выделению. Аналогично, когда производится щелчок по подсказке, ее текст должен быть скопирован в поле ввода, а сам вы¬падающий список должен быть скрыт. Для этого необходимо обрабо¬тать три события: onmouseover, omousedown и onmouseup.
Обработчик события onmouseover будет использоваться только для того, чтобы выделить текущую подсказку в списке, onmousedown - чтобы вы¬брать текущую подсказку (скопировать ее в текстовое поле и скрыть выпадающий список), a onmouseup - чтобы вернуть фокус ввода в тек¬стовое поле после выбора подсказки. Поскольку все три события воз¬никают в одном и том же элементе, то и обрабатывать события лучше в одной функции:
AutoSuggestControl.prototype.createDropDown = function () {
this, layer = document. createElementf'div");
this.layer.className = "suggestions";
this.layer.style.visibility = "hidden";
this.layer.style.width = this.textbox.offsetWidth;
document.body.appendChild(this.layer);
var oThis = this; , ' '
this.layer.onmousedown = this.layer.onmouseup = 4
this.layer.onmouseover = function (oEvent) {
oEvent = oEvent || window.event; • 4
oTarget = oEvent.target' || oEvent.srcElement;
if (oEvent.type == "mousedown") { .
oThis.textbox.value = oTarget.firstChild.nodeValue;
oThis.hideSuggestions(); } else if (oEvent.type == "mouseover") {
oThis.highlightSuggestion(oTarget); ^Wf^lsel||;§^
oThis.textbox.focus();

};
В первой части этого фрагмента в переменную oThis запис-ссылка на объект this. Это совершенно необходимо для орга доступа к объекту AutoSuggestCont rol изнутри обработчика с Далее производится назначение одной и той же функции в кач работчика всех событий onmouseover, onmousedown и onmouseup. две строки функции нужны для того, чтобы с учетом различий моделями событий (DOM и IE) посредством логической операции (||) записать соответствующие значения в переменные oEvent и оТ (Источником события всегда будет элемент , содержащий сказку.)
Если обрабатывается событие mousedown, то текст подсказки из ника события переписывается в текстовое поле. Текст внутри та содержится в виде текстового узла, который являете» вым дочерним узлом элемента. Извлечение текста производите* мощью свойства nodeValue. После того как текст подсказки будет писан, выпадающий список скрывается.
Когда обрабатывается событие mouseover, ссылка на источник с передается методу highlightSuggestionQ, чтобы обеспечить эф зуального выделения подсказки. Когда обрабатывается событие up, фокус ввода передается в текстовое поле (это событие воз сразу же вслед за событием mousedown).