HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

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];