Наша первая "рабочая" Web-форма будет содержать следующие элементы:
— надпись "Поиск", чтобы посетитель сразу понял, зачем нужна эта Web-форма;
— поле ввода значения для поиска, где указывается искомое слово или начало слова;
— кнопку, запускающую поиск;
— раскрывающийся список для выбора режима поиска (только по названиям, только по ключевым словам или одновременно по названиям и по ключевым словам).
Содержимое Web-формы мы поместим в один абзац, который разобьем на три строки с помощью тегов разрыва строк (см. главу 3). Первая строка будет содержать надпись, вторая — поле ввода и кнопку, третья — раскрывающийся список. Можно, конечно, разместить эти элементы в трех отдельных абзацах, но так 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
function searchData() {
var sKeyword = Ext.get("keyword"). getValue(false);
if (sKeyword!= "") {
var iSearchMode = Ext.getDom("search_in"). selectedIndex;
var aResult = [];
searchInArray(sKeyword, aHTML, aResult, iSearchMode); searchInArray(sKeyword, aCSS, aResult, iSearchMode); searchInArray(sKeyword, aSamples, aResult, iSearchMode); if (aResult.length > 0) {
var s = "";
for (var i = 0; i < aResult.length; i++) {
s += "<LI><A HREF=\"" + aResult[i].url + "\">" +
aResult[i].name + "</A></LI>";
}
var htelResult = Ext.get("cmain"). insertHtml("beforeEnd", "<P>Результаты поиска:</P><UL>" + s + "</UL>"); Ext.fly(htelResult). select("A"). on("click", function(e, t) {
var href = Ext.fly(this). getAttribute("href");
var elA = Ext.get("navbar"). child("A[href=" + href + "]");
var elItem = elA.parent("LI");
loadFragment(elItem, e);
});
}
}
}
Рассмотрим его построчно.
Получаем искомое слово, введенное посетителем в поле ввода keyword:
var sKeyword = Ext.get("keyword"). getValue(false);
Проверяем, ввел ли посетитель вообще что-либо в это поле ввода:
if (sKeyword!= "") {
Если ввел, получаем номер пункта, выбранного в раскрывающемся
search_in:
var iSearchMode = Ext.getDom("search_in"). selectedIndex;
Объявляем массив, который будет хранить набор элементов массивов aHTML, aCSS и aSamples, имеющих название или одно из ключевых слов, начало которого совпадает с введенным посетителем словом:
var aResult = [];
Фактически этот массив будет хранить результаты поиска.
Для каждого из массивов aHTML, aCSS и aSamples вызываем функцию searchInArray, которую объявим потом:
searchInArray(sKeyword, aHTML, aResult, iSearchMode); searchInArray(sKeyword, aCSS, aResult, iSearchMode); searchInArray(sKeyword, aSamples, aResult, iSearchMode);
Эта функция будет искать элементы в массиве, переданном ей вторым параметром, имеющие название или одно из ключевых слов, начало которого совпадает со словом, переданным первым параметром, и помещать их в массив с результатами поиска, переданный третьим параметром. Четвертым параметром этой функции передается номер пункта, выбранного в раскрывающемся списке search_in, — режим поиска.
Проверяем, есть ли в массиве с результатами поиска хоть один элемент, т. е. увенчался ли поиск успехом:
if (aResult.length > 0) {
Если так, объявляем переменную, которая будет хранить строку с HTML-кодом, формирующим пункты списка с результатами поиска:
var s = "";
(Ранее мы договорились, что будем выводить результаты поиска на Web-страницу в виде списка HTML; каждый пункт этого списка будет содержать гиперссылку на соответствующую Web-страницу.)
Запускаем цикл со счетчиком, который будет просматривать все элементы массива с результатами поиска:
for (var i = 0; i < aResult.length; i++) {
Тело этого цикла на основе каждого элемента массива с результатами поиска сформирует HTML-код, создающий пункт списка с гиперссылкой:
s += "<LI><A HREF=\"" + aResult[i].url + "\">" +
aResult[i].name + "</A></LI>";
}
На основе полученного таким образом HTML-кода создаем список с результатами поиска и помещаем его в самом конце контейнера cmain:
var htelResult = Ext.get("cmain"). insertHtml("beforeEnd",
"<P>Результаты поиска:</P><UL>" + s + "</UL>");
Выбираем из этого списка все гиперссылки и привязываем к ним обработчик события click, который будет обрабатывать щелчки на этих гиперссылках и выполнять загрузку соответствующей Web-страницы:
Ext.fly(htelResult). select("A"). on("click", function(e, t) {
var href = Ext.fly(this). getAttribute("href");
var elA = Ext.get("navbar"). child("A[href=" + href + "]");
var elItem = elA.parent("LI");
loadFragment(elItem, e);
});
}
}
Этот фрагмент кода без изменений перекочевал сюда из функции generateRelated, объявленной в главе 19. (В принципе, будет лучше оформить его в виде отдельной функции, но это вы можете сделать сами, в качестве домашнего задания.)
На этом выполнение функции searchData заканчивается.
Осталось объявить функцию searchInArray, которая, собственно, будет выполнять поиск в массивах, составляющих базу данных. Объявляющий код (листинг 20.21) мы поместим где-либо перед объявлением функции searchData.
Листинг 20.21
function searchInArray(sKeyword, aDataArray, aResultArray, iSearchMode) {
var sN, sK;
var sKw = "," + sKeyword.toLowerCase();
for(var i = 0; i < aDataArray.length; i++) {
sN = "," + aDataArray[i].name.toLowerCase();
if (aDataArray[i].keyword)
sK = "," + aDataArray[i].keyword.toLowerCase()
else
sK = "";
if (((iSearchMode == 0) || (iSearchMode == 2)) && (sN.indexOf(sKw)!= -1))
aResultArray[aResultArray.length] = aDataArray[i]
else
if (((iSearchMode == 1) || (iSearchMode == 2)) && (sK.indexOf(sKw)!= -1))
aResultArray[aResultArray.length] = aDataArray[i];
}
}
Как уже говорилось, эта функция принимает четыре параметра:
— искомое слово в виде строки;
— массив, составляющий базу данных, в котором будет выполняться поиск;
— массив, в который будут помещаться результаты поиска;
— число, обозначающее режим поиска. Фактически это номер пункта, выбранного посетителем в раскрывающемся списке search_in.
Результат эта функция возвращать не будет.
Давайте рассмотрим объявляющий ее код построчно, т. к. он довольно сложен, хоть и невелик по размеру.
Объявляем служебные переменные:
var sN, sK;
Преобразуем полученное первым параметром искомое слово к нижнему регистру, добавляем к ней спереди запятую и сохраняем в служебной переменной для дальнейшего использования:
var sKw = "," + sKeyword.toLowerCase();
Посетитель — человек непредсказуемый. Кто знает, в каком регистре он наберет искомое слово — в верхнем или нижнем, прописными буквами или строчными. А названия Web-страниц нашего Web-сайта указаны как в верхнем, так и в нижнем регистре. И строка, набранная в верхнем регистре, не равна строке, содержащей те же символы, но набранные в нижнем регистре; так, строки "title"
