названиям Web-страниц, во-вторых, по ключевым словам, связанным с каждой Web-страницей.
Далее, мы предоставим посетителю возможность выбирать критерии поиска: только по названиям, только по ключевым словам или и по названиям, и по ключевым словам. Для этого мы используем раскрывающийся список, т. к. он занимает немного места на Web-странице и вполне информативен.
Что касается самого поиска, то реализовать его несложно. Достаточно просмотреть все три массива, составляющие нашу базу данных, найти элементы, содержащие название или ключевое слово, совпадающее с введенным посетителем значением, и скопировать их в другой массив, который будет хранить результаты поиска. Потом на основе полученного массива мы сформируем, скажем, список, пункты которого будут представлять собой гиперссылки на соответствующие Web-страницы, и вставим его в контейнер cmain. Почти как в случае раздела 'См. также'.
Еще мы предусмотрим ситуацию, когда посетитель введет не все искомое название или ключевое слово, а только его начало. Соответственно, Web-сценарий, который мы напишем, будет искать элементы базы данных, начало названия или одного из ключевых слов которого совпадает с тем, что ввел посетитель.
Что ж, основной план работ мы набросали, а детали будем прояснять по ходу дела. Начнем с базы данных.
Подготовка базы данных
Нам потребуется указать для каждого элемента массива, составляющего базу данных и представляющего одну из Web-страниц, список ключевых слов. Для этого мы создадим у конфигураторов — элементов этих массивов новое свойство keyword, которому и присвоим список соответствующих ключевых слов. Он будет представлять собой обычную строку с ключевыми словами, разделенными запятыми, — так его проще обрабатывать.
Откроем файл Web-сценариев data.js и поместим после кода, создающего свойство related со связанными данными, но перед кодом, выполняющим сортировку базы, такое выражение:
aHTML[0].keyword = 'тип, версия';
Мы взяли первый элемент массива aHTML (с индексом 0), добавили к хранящемуся в нем конфигуратору свойство keyword и присвоили этому свойству строку с ключевыми словами 'тип' и 'версия'. Следовательно, мы указали, что Web-страницу с описанием тега <!DOCTYPE> будут характеризовать эти два ключевых слова.
Аналогично укажем ключевые слова для остальных Web-страниц нашего Web- сайта. Необязательно для всех — хотя бы для нескольких, чтобы только проверить поиск в работе.
Создание Web-формы
На очереди — Web-форма, в которую посетитель будет вводить искомое слово или его часть. Вот только куда ее поместить? Давайте пока что вставим ее в контейнер cnavbar, ниже полосы навигации, непосредственно перед закрывающим тегом </DIV>, формирующим этот контейнер. В
Наша первая 'рабочая' Web-форма будет содержать следующие элементы:
— надпись 'Поиск', чтобы посетитель сразу понял, зачем нужна эта Web-форма;
— поле ввода значения для поиска, где указывается искомое слово или начало слова;
— кнопку, запускающую поиск;
— раскрывающийся список для выбора режима поиска (только по названиям, только по ключевым словам или одновременно по названиям и по ключевым словам).
Содержимое Web-формы мы поместим в один абзац, который разобьем на три строки с помощью тегов разрыва строк (см.
Поле ввода искомого слова мы назовем keyword, кнопку — find, а раскрывающийся список — search_in.
Листинг 20.19 содержит HTML-код, создающий Web-форму.
Листинг 20.19
<FORM ACTION='#'>
<P>
Поиск:<BR>
<INPUT TYPE='search' ID='keyword' NAME='keyword' SIZE='20'>
<INPUT TYPE='button' ID='find' NAME='find' VALUE='Искать!'><BR>
<SELECT ID='search_in' NAME='search_in'>
<OPTION>В названиях</OPTION>
<OPTION>В ключевых словах</OPTION>
<OPTION SELECTED>В названиях и ключевых словах</OPTION>
</SELECT>
</P>
</FORM>
Вставим его в соответствующее место файла фрагмента html.htm.
Обязательно проверим, правильно ли наша Web-форма отображается на Web-странице. Если мы допустили в HTML-коде ошибку, лучше исправить ее прямо сейчас.
Написание Web-сценария, выполняющего поиск
Осталось написать Web-сценарий, который будет искать Web-страницы, удовлетворяющие заданным посетителем условиям.
Откроем файл Web-сценария main.js и поместим где-либо в теле функции, передаваемой в качестве параметра методу onReady объекта Ext, такое выражение:
Ext.get('find'). on('click', searchData);
Оно привязывает к событию click кнопки find функцию-обработчик searchData, которая будет выполнять поиск и выводить его результаты и которую мы объявим чуть позже. Кнопка find созданной нами Web-формы запускает процесс поиска, а событие click, как мы уже знаем, возникает при щелчке на кнопке.
Теперь объявим функцию searchData. Она не будет ни принимать параметры, ни возвращать результат. Объявляющий ее код (листинг 20.20) поместим где-либо перед вызовом методу onReady объекта Ext.
Листинг 20.20
