Реализация поиска на Web-сайте

Давайте реализуем поиск на нашем Web-сайте. Поиск будет осуществляться на основе информации, хранящейся в базе данных, которую мы создали ранее. База данных – вещь универсальная и может при-годиться для многих дел. Мы уже убедились в этом, когда создавали раздел "См. также" у Web-страниц, куда поместили связанные с ними материалы.

Чтобы усложнить себе задачу и упростить жизнь посетителям, мы реализуем поиск, во-первых, по названиям Web-страниц, во-вторых, по ключевым словам, связанным с каждой Web-страницей. Ключевым словом в данном случае называется специальным образом подобранное кодовое слово, характеризующее конкретный материал. Скажем, для материала, рассказывающего о теге <AUDIO>, ключевыми словами будут "мультимедиа" и "аудио", поскольку он описывает способ размещения на 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-форма;

• поле ввода значения для поиска, где указывается искомое слово или начало слова;

• кнопку, запускающую поиск;

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

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

Поле ввода искомого слова мы назовем keyword, кнопку – find, а раскрывающийся список – search_in.

Листинг 20.19 содержит HTML-код, создающий Web-форму.

Реализация поиска на Web-сайте

Вставим его в соответствующее место файла фрагмента html.htm.

Обязательно проверим, правильно ли наша Web-форма отображается на Web-странице. Если мы допустили в HTML-коде ошибку, лучше исправить ее прямо сейчас.