В первую очередь создается файл HTML, который будет отобра на стороне клиента. В нашем случае код HTML должен включатц сание текстового поля ввода и текстовую область, где будет вь ся список подсказок. Вы, наверное, уже знакомы с тем, как oi ется поле ввода на языке HTML:

В большинстве случаев такого описания будет вполне достаток нако некоторые броузеры (в особенности это касается броузеров ] net Explorer в ОС Windows и Mozilla Firef ох во всех операционв темах) уже обеспечивают возможность автоматического допо с выпадающим списком подсказок, основываясь на предыдущем i пользователя. Такое поведение поля ввода вступает в конфликт CJ кой нашего приложения, поэтому оно должно быть отключено, го надо присвоить атрибуту autocomplete значение off:
В этот элемент будут вложены другие элементы - по од-вюму для каждой подсказки. Изменяя стили этих вложенных элемен¬тов, мы сможем добиться эффекта выделения той или иной подсказки. Ниже приводится фрагмент кода HTML, который создает список, по¬казанный на рис. 7.1:

Maine
Maryland
Massachusetts
Michigan
Minnesota
Mississippi
Missouri
Montana
Разумеется, такой фрагмент кода HTML не «зашивается» в основной файл страницы, а формируется динамически с помощью JavaScript. Однако, чтобы создать список, надо представлять себе его строение.
Само собой разумеется, чтобы заставить работать список должным об¬разом, придется использовать классы CSS. Самый внешний элемент будет иметь класс suggestions:
div.suggestions {
-moz-box-sizing: border-box; box-sizing: border-box; background-color: white; border: 1px solid black; position: absolute;

Первые две строки в описании класса предназначены для броу поддерживающих две формы определения ширины текстовых ( по содержимому (стандарт W3C) - content-box и по полному блока, включая рамку и отступы (эта модель принята в Micro border-box (за дополнительной информацией по этой теме обраща по адресу: www.quirksmode.org/css/box.html). По умолчанию Int Explorer в стандартном режиме задействует модель content-box, ai жиме обратной совместимости (quirks mode) - border-box. В бол стве DOM-совместимых броузеров (Mozilla» Opera и Safari) по; нию принимается модель content-box. То есть разные броузеры : по-разному отображать элемент . Во избежание разног первые две строки класса CSS принудительно устанавливают отображения border-box. Первая строка -moz-box-sizing относится! ко к Mozilla и предназначена для устаревших версий этого бр Вторая предназначена для броузеров, поддерживающих свойств»! sizing, определяемое стандартом CSS3. Если для страницы уста режим обратной совместимости, то этот класс придется как кстати. (Если в броузере установлен стандартный режим, то две строки можно удалить.)
Оставшиеся свойства просто добавляют рамку и режим позицио вания элемента .
Затем необходимо задать формат отображения отдельных эле списка:
div.suggestions div { cursor: default; padding: Opx 3px;
>
Первая строка определяет внешний вид курсора по умолчанию (с ка), наведенного на элемент выпадающего списка. Без этого oi ния курсор мыши принимал бы форму курсора редактирования, < ную для текстовых областей и веб-страниц в целом. Пользой не должен думать, что выпадающий список - это часть текста : странице, список должен ассоциироваться с текстовым полем и изменение формы курсора призвано помочь ему в этом. Вторая) ка добавляет отступы к элементу (их можно изменить).
И наконец, в CSS надо определить формат отображения выде элемента списка. Выбранный элемент будет отображаться белым i на синем фоне. Обычно такой стиль выделения установлен для ме
div.suggestions div.current { background-color: йЗЗббсс; color: white;
}
Все эти стили содержатся во внешнем файле CSS с именем autosjCSS.