Дополнительные возможности по управлению списком подсказок виатуры относятся к следующим четырем клавишам: «стрелка «стрелка вниз», Esc и Enter (или Return). Когда список с поде выводится на экран, пользователь должен иметь возможность, на клавишу «стрелка вниз», выделить первую подсказку в спи тем последующими нажатиями этой клавиши выделить втору* сказку, третью и т. д. Необходимо предоставить пользователю ность перемещаться по списку в обратном направлении с помо виши «стрелка вверх». По мере перемещения по списку каждая подсказка должна копироваться в текстовое поле. Если польс;: нажимает клавишу Esc, список подсказок должен скрываться, а подсказки необходимо удалить из текстового поля. При нажа виши Enter список с подсказками также должен скрываться, но няя выбранная подсказка должна остаться в текстовом поле.
Чтобы пользователь смог работать с клавишами «стрелка и «стрелка вниз», необходимо как-то отслеживать текущее пол в списке. Для этого надо добавить два свойства в определение
AutoSuggestionControl:
function AutoSuggestControl(oTextbox, oProvider) { this.cur = -1;
this.layer = null; this.provider = oProvider; this.textbox = oTextbox; this.userText = oTextbox.value; this.init();
>
Свойство cur будет хранить индекс текущей выделенной по в массиве. По умолчанию его значение устанавливается равным -скольку изначально нет ни одной подсказки. По нажатию на курсорных клавиш значение свойства cu г будет изменяться с вующим образом. Второе свойство, userText, будет хранить часть ки в текстовом поле, которая фактически была введена пользо
Одновременно со значением свойства cur будет изменяться и ние цветом текущей подсказки. Все необходимые для этого д будут выполняться методом goToSuggestion(). Он принимает венный аргумент - число, в котором знак определяет направл ремещения. Так, любое число больше 0 будет вызывать переi следующей подсказке, а любое число, меньшее или равное 0, - к пре-дыдущей подсказке:
* AutoSuggestControl.prototype.goToSuggestion = function (iDiff) {
var cSuggestionNodes = this.layer.childNodes;
if (cSuggestionNodes.length > 0) {
^' var oNode = null;
if (iDiff > 0) {
if (this.cur < cSuggestionNodes.length-1) {
. oNode = cSuggestionNodes[++this.cur]; ,
* } else {
I if (this.cur > 0) {
oNode = cSuggestionNodes[—this, cur];

if (oNode) {
this.hlghlightSuggestion(oNode);
this.textbox,value = oNode.firstChild.nodeValue;
Этот метод начинает свою работу с того, что получает массив дочерних узлов выпадающего списка. В элементе выпадающего списка содержатся только дочерние элементы с подсказками, поэтому количество дочерних узлов точно соответствует количеству подска¬зок. По значению этого числа можно определить, есть ли вообще ка¬кие-нибудь подсказки (в этом случае число должно быть больше ну¬ля). Если подсказок нет, то метод не должен делать ничего.
Если есть хотя бы одна подсказка, создается переменная oNode, кото¬рая будет хранить ссылку на узел с выделенной подсказкой, после чего метод определяет направление движения. Если значение аргумента iDiff больше нуля, выполняется попытка перейти к следующей под¬сказке. Для этого метод сначала убеждается в том, что значение свойст¬ва cur не превышает числа подсказок минус 1 (потому что индекс по¬следнего элемента массива, содержащего п элементов, будет равен п-1). Если следующая подсказка существует, выполняется префиксная опе¬рация инкремента свойства cur (т. е. сначала значение увеличивается на 1, а потом уже увеличенное значение участвует в дальнейших вы¬числениях) для получения ссылки на следующий узел с подсказкой.
Если значение аргумента iDiff меньше или равно 0, значит, надо перей¬ти к предыдущей подсказке. В этом случае необходимо сначала убе¬диться, что значение свойства cur больше 0 (если свойство cur равно 0, значит, выделена самая первая подсказка, и выше двигаться просто не¬куда). После проверки выполняется префиксная операция декремента свойства cu г для получения ссылки на предыдущий узел с подсказкой.
В заключение метод проверяет значение переменной oNode на ] во null. Если в переменной содержится корректная ссылка на; она передается методу highlightSuggestion(), а текст подсказки i сывается в текстовое поле. Если в переменной oNode содержится > ние null, то никаких действий не предпринимается.
Кроме этого необходимо предусмотреть переустановку значения < ства сиг при получении нового списка подсказок, в противном i поведение выпадающего списка может стать непредсказуемым, ние -1 надо записывать в свойство сиг непосредственно перед вь списка подсказок в методе autosuggest():
AutoSuggestControl.prototype.autosuggest=function (aSuggestions, bTyp this.cur = -1;
if (aSuggestions.length > 0) { if (bTypeAhead) {
this.typeAhead(aSuggestions[0]);
}
this.showSuggestions(aSuggestions); } else <
this.hideSuggestions();
}
};
Очень важно также корректно устанавливать значение свойств»! Text. Делаться это должно в методе handleKeyl)p():
AutoSuggestControl.prototype.handleKeyUp = function (oEvent) {
var iKeyCode = oEvent.keyCode; this. userText = this, textbox. value; ....
if (iKeyCode == 8 || iKeyCode == 46) {
this.provider.requestSuggestions(this, false);
} else if (iKeyCode < 32 || (iKeyCode >= 33 && iKeyCode <= 46) || (iKeyCode >= 112 && iKeyCode <= 123)) { // игнорировать
} else {
this.provider.requestSuggestions(this, true);
>
};
Это маленькое дополнение поможет сохранить часть строки, фактически уже была введена пользователем перед запросом подсказок. Кроме того, это нам пригодится при обработке клавиши Esc. Мы внесли дополнения в эти два метода, и нам < лишь вставить вызов метода goToSuggestion() в правильное место.
Для обработки нажатий на клавиши «стрелка вверх», «стрелка i Esc и Enter нам потребуется метод handleKeyDown(). Он похож на i handleKeyUp() и также принимает объект event в качестве арг Решение о выполнении тех или иных действий в этом методе приниматься на основе кода нажатой клавиши. Коды клавиш «стрел¬ка вверх», «стрелка вниз», Esc и Enter равны 38, 40, 27 и 13 соответст¬венно. Метод handleKeyDown() определен так:
AutoSuggestControl.prototype.handleKeyDown = function (oEvent) { switch(oEvent.keyCode) {
case 38: // стрелка вверх this.goToSuggestion(-1); break;
case 40: // стрелка вниз
this.goToSuggestion(l);
break; case 27: // esc
' \ ' this.textbox.value = this.userText;
this.selectRange(this.userText.length, 0);
/• исполнение продолжится дальше */..,^^,#;
case 13: // enter
^Ж^Ш* "'';^tnl;s;hidel3u
oEvent.returnValue = false; if (oEvent.preventDefault) { oEvent.preventOefault();
.break;
}
При нажатии клавиши «стрелка вверх» (код 38) вызывается метод до-ToSuggestion() с аргументом -1, который говорит о том, что следует пе¬рейти к предыдущей подсказке. Аналогично при нажатии клавиши «стрелка вниз» (код 40) вызывается метод goToSuggestion() с аргумен¬том 1, чтобы перейти к следующей подсказке. По нажатию на клави¬шу Esc (код 27) выполняется несколько действий.
Во-первых, необходимо вернуть в текстовое поле прежнее значение -текст, который был уже фактически введен пользователем. Во-вто¬рых, необходимо область выделения перенести за последний символ в поле ввода, т. к. пользователь может продолжить ввод. Для этого ин¬декс первого символа области выделения устанавливается равным дли¬не строки, а размер области - равным нулю. Затем исполнение продол¬жается по той же ветке, по которой ведется обработка нажатия на кла¬вишу Enter (код 13), где список с подсказками делается невидимым. Таким образом, вместо двух вызовов метода hideSuggestions() выполня¬ется всего один. Не забывайте, что текст подсказки копируется в тек¬стовое поле при перемещении по списку с помощью клавиш «стрелка вверх» и «стрелка вниз». Таким образом, по нажатию на клавишу Enter нам остается только скрыть список.
Кроме того, при обработке клавиш Enter и Esc необходимо предотвра¬тить реакцию броузера по умолчанию. Это очень важно, поскольку по умолчанию нажатие на клавишу Enter может соответствовать нажатию кнопки отправки формы, когда на самом деле пользователь хотел всего лишь подтвердить выбор текущей подсказки. Блокировка ния по умолчанию выполняется за счет записи значения false * ство event. returnValue (для IE) или вызова метода preventDe (в Firefox).